html - 如何将 flexbox 元素与文本区域输入的基线对齐

Question

我有一个非常简单的输入表单。我想将标签与输入控件对齐，使它们处于同一水平。

我决定使用 align-items: baseline 因为无论填充、高度等是什么，它总是会正确对齐。但是，出于某种原因，当它与 textarea 类型的输入一起使用时，它不会与基线对齐，而是在底部对齐。为什么？

当然，我可以为 textarea 使用 self-align 和 padding-top 来修复它，但这违背了拥有某些东西的目的灵活，无需修复某些输入中的填充。

我只需要理解逻辑，或者这是一个错误/已知问题？

* {
  margin: 0;
  padding: 0;
}

form {
  width: 500px;
  margin: 0 auto;
  background-color: #e4e4e4;
}

form .control ~ .control {
  margin-top: 20px;
}

.control {
  display: flex;
  align-items: baseline;
}

.control>div:nth-child(1) {
  flex: 0 1 150px;
  text-align: right;
  padding-right: 20px;
}

.control>div:nth-child(2) {
  flex: 1;
}

.control input,
.control textarea {
  width: 100%;
  padding: 20px;
}

.control textarea {
  height: 100px;
}

<form>
  <div class="control">
    <div>
      <label>Label goes here</label>
    </div>
    <div>
      <input type="text" name="pretitle" value="">
    </div>
  </div>
  <div class="control">
    <div>
      <label>Article</label>
    </div>
    <div>
      <textarea name="article"></textarea>
      <p class="explain sub">HTML allowed</p>
    </div>
  </div>
  <div class="control">
    <div>
      <label>Label</label>
    </div>
    <div>
      <input type="text" name="pretitle" value="">
    </div>
  </div>
</form>

https://jsfiddle.net/bnaL94u6/13/

Answer 1

问题不在于 textarea，而是您添加到 input 和 textarea 的 padding，在textarea，你不会注意到它增长，因为 20pxx2 (40px) 不高于 100px，但是 input 本身没有 padding 只有 19px，当你添加 40px 的 padding 时，它会有一个59px 的总高度。并且标签将在那些 59px

的中间对齐