Html 如何对齐嵌套在div中的textarea的基线

我用flex-box做了一个表格，我试图对齐div和textarea的基线。当textarea嵌套在div中时，我无法对齐基线，但当它不在div中时，它们会按需要对齐

我的限制是，我需要在div（或至少在元素中）内的textarea旁边，因为我使用的组件框架要求组件具有根元素（这部分对我的问题并不重要）

那么，如何在保持文本区域在div中的同时使对齐工作？这个JSFIDLE显示了我的问题：

这就是我的结构：

<div class="field">
  <div class="field-key">comments:</div>
  <div class="field-value">
    <div id="annoying">
      <textarea class="text-field long-text-field autosize"
                rows="10"
                style="overflow: hidden; word-wrap: break-word; resize: horizontal;">
        This textarea is surrounded by a div (with id #annoying), which is causing the baseline alignment to not work correctly.
      </textarea>
    </div>
  </div>
</div>

我遇到的问题是：

---

不知道你在说什么。这就是你想要的吗？非常感谢！我希望保持基线一致；我忘了把它放在提琴里，但是标签和文本框之间的填充顶部不匹配，所以使用填充时，对齐就丢失了。你知道有没有可能解决这个问题？为什么不在标签上应用相同的填充？嗯，我能做到。主要是因为右栏中的项目是根据数据类型选择的组件（一些是数字字段、一些文本字段和一些文本区域），我希望这些组件尽可能独立，而不是必须在父组件中放置条件逻辑，该父组件仅在其所在的组件是textarea时应用填充。所以我可以这样做，我只是想看看是否有可能不这样做，因为css基线对齐的目的与我所做的类似标签（

.field key

）及其同级（

.field value

）是flex项，可以与flex属性对齐。

.field value

的子对象（包括textarea的内容）是独立的对象。他们不知道标签在做什么。我建议您将标签和textarea设置为兄弟，但我理解在您的框架中可能不可能做到这一点。

.field {
  display: flex;
  align-items: baseline;
  flex-flow: row nowrap;
}

.field-key {
  display: flex;
  font-size: 14pt;
  flex-basis: 120px;
}

.field-value {
  display: flex;
  font-size: 14pt;
  flex-grow: 1;
}

textarea, input {
  font-size: 14pt;
}