html - textarea 位置不稳定

Question

为什么我的文本区域放置与我的 input type="text"放置不同？

片段相关。

input[type="text"], textarea {
  height:100px;
}

/* no css other than height to show my point */

<form>
  <input type="text" placeholder="Form 1, input type=text"/>
  <input type="button" value="Form 1"/>
  <input type="button" value="It is centered"/>
</form>

<form>
  <textarea placeholder="Form 2, textarea."></textarea>
  <input type="button" value="Form 2"/>
  <input type="button" value="Not centered"/>
</form>

Answer 1

如果你的意思是关于兄弟输入的位置，那么你可以为 textarea 设置 vertical-align:

textarea {
    vertical-align: middle;
    /* the rest of your styles */
}

编辑:

Vertical-align 的默认值为 baseline。
textarea 的基线朝向底部(如果你有一个内联 block div 而不是 textarea，它会是一样的)。但是 input[type=text] 的基线——因为它自然只有一行——在中间。所以我们需要为文本区域显式添加 vertical-align: middle。