html - 为什么textarea和具有相同字体大小,行高,填充和高度的输入文本在垂直方向上对齐不同?-LMLPHP

问题1:

如果以下textarea和文本input都具有相同的font-sizeline-heightheightpadding,为什么垂直文本对齐方式不同?

问题1.1

如何使textareainput具有相同的垂直对齐方式?



.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>

10-05 20:55
查看更多