Question

我有一个非常简单的输入表格。我想将标签与输入控件对齐，以便它们处于同一级别。

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

当然，我可以使用self-align和padding-top为textarea修复它，但是这样可以避免在不需要在某些输入中修复填充的情况下实现灵活性的目的。< / p>

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

* {
  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，而在padding和input都添加了textarea，在textarea中，您不会注意到它的增长因为20px x2（40px）不高于100px，但没有input的{{1}}本身只有padding，而当你添加19px 40px，padding总共height。并且标签将在59px

的中间对齐

如何将flexbox项目与textarea输入

1 个答案: