为什么这种将 textarea 与其标签对齐的方法有效？答案

【问题标题】：Why is this method to align textarea with its label working?为什么这种将 textarea 与其标签对齐的方法有效？
【发布时间】：2021-11-02 18:20:06
【问题描述】：

我找到了一个 solution 来将 textarea 的顶部与其标签的顶部对齐。

我的问题是：<label> 的vertical-align 属性仍然是默认值（基线），那么为什么我们可以通过将<textarea> 的vertical-align 属性设置为top 来将它们对齐？

非常感谢！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Active learning: Implementing our form HTML</title>
  <style>
    form {
      margin: 0 auto;
      width: 500px;
      padding: 1em;
      border: 1px solid #ccc;
      border-radius: 1em;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    form li+li {
      margin-top: 1em;
    }

    label {
      width: 90px;
      display: inline-block;
      text-align: right;
    }

    input,
    textarea {
      font: 1em sans-serif;
      width: 300px;
      box-sizing: border-box;
      border: 1px solid #999;
      outline: none;
    }

    input:focus,
    textarea:focus {
      border-color: #000;
    }

    img {
      vertical-align: top;
      width: 150px;
      border: 1px solid blue;
    }

    textarea {
      vertical-align: top;
    }
  </style>
</head>

<body>
  <form action="/my-handling-form-page" method="post">
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">
      </li>
      <li>
        <label for="mail">E-mail:</label>
        <input type="email" name="user_email" id="mail">
      </li>
      <li>
        <label for="msg">Message:</label>
        <textarea name="user_message" id="msg"></textarea>
      </li>
      <li class="button">
        <button type="submit">Send your message</button>
      </li>
    </ul>
  </form>

</body>

</html>

【问题讨论】：

值得注意的是，这并没有在 CSS 规范中定义。标签可以放置在文本区域从顶部到底部的任何位置，并且可以满足规范的所有约束。这实际上导致了一个奇怪的现象。如果该行包含一个标签和两个文本区域，第一个 vertical-align:top 和第二个 vertical-align:bottom，Firefox 和 Chromium 在标签垂直放置的位置上存在分歧。
嗨，@Alohci，谢谢。似乎是这样。 CSS 规范没有明确规定如何对齐 line box 中的 textarea。如果设置vertical-align: middle，这两个浏览器之间似乎是一致的。看来这是浏览器实现的不同之处之一。

标签： css textarea vertical-alignment

【解决方案1】：

我的问题是：的vertical-align 属性仍然是默认值（基线），那么为什么我们可以通过将vertical-align 属性设置为顶部来对齐它们呢？

它们仍然在基线对齐，但视觉结果是顶部。

通过将vertical-align:top 添加到<textarea>，在基线对齐中不再考虑这一点，因此仅涉及标签，并且由于它是唯一的元素，因此它将设置基线并在逻辑上触及顶部。

这里有一个插图可以更好地理解：

div {
  border:1px solid red;
  margin:4px
}

The label is alone aligned at the baseline
<div>
  <label for="msg">Message:</label>
</div>
The baseline and top are the same
<div>
  <label for="msg" style="vertical-align:top">Message:</label>
</div>
Adding the textarea with vertical-align:top will not change the baseline. It will simply add the textarea at the top and expand the height
<div>
  <label for="msg">Message:</label>
  <textarea name="user_message" style="vertical-align:top"></textarea>
</div>
add another element aligned at the baseline and the label will get affected. The textarea is still at the top unaffected by the baseline
<div>
  <label for="msg">Message:</label>
  <span style="font-size:40px">AA</span>
  <textarea name="user_message" style="vertical-align:top"></textarea>
</div>

【讨论】：

【解决方案2】：

标签的默认值，vertical-align 仍然是baseline，因此您只需将其添加到您的代码中：

 label {
      width: 90px;
      display: inline-block;
      text-align: right;
      vertical-align: top;
      
    }

如果您想了解更多信息，可以在此处找到更多信息：w3schools.com/cssref/pr_pos_vertical-align.asp

【讨论】：