问题 1:
为什么要执行以下操作 textarea
和文本input
如果它们具有相同的 font-size
,则具有不同的垂直文本对齐方式 , line-height
, height
, padding
?
问题1.1
我怎样才能制作textarea
与 input
具有相同的垂直对齐方式?
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
最佳答案
文本区域用于多行文本,而输入用于单行。
这就是为什么行高不会对输入产生影响,因为它被认为等于输入的高度。
您可以删除输入中的行高,因为它对输入没有影响。
此外,您的行高应该与文本区域的高度相同,以重现与输入相同的效果。
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 32px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
关于html - 为什么具有相同字体大小、行高、填充和高度的文本区域和输入文本垂直对齐方式不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56327798/