Question

我正在尝试构建一个包含输入，textareas和块元素的表单，每个表单都带有标签。为了获得灵活的网格，我正在使用表格。对于标签和输入/ textarea的匹配垂直对齐，我设置vertical-align: baseline;，它适用于输入和textareas。但不是div（see this jsFiddle）。 div的标签因此在单元格的底部对齐，但我希望它在顶部，即基线应该在顶部。

如何在不改变div的内容或输入/ textareas和div的标签之间有所不同的情况下实现这一目标？有没有办法强制不可见的基线位于表格单元格的顶部？

也许我没有从右侧接近问题，任何见解都表示赞赏。

Answer 1

使用以下代码解决您的问题：

  td, label, textarea {
            vertical-align: top;
        }

Answer 2

您的div必须至少有一个字符（例如＆amp; nbsp; ）。

对于textareas，“vertical-align：baseline;”仅适用于Gecko。

作为developer.mozilla.org said，

HTML规范没有定义＆lt; textarea＆gt;的基线位置。是

我找到了解决方法，但它改变了HTML。我将vertical-align：text-top设置为textarea，并修复由textarea的border-top和padding top的高度引起的间隙，我将其设置为负边距。为了避免textarea与其上方的所有元素重叠，我在textarea周围放置一个带有填充顶部的div来抵消差距。

HTML：

<div class="textarea-wrapper"><textarea id="b">nice vertical alignment</textarea></div>

CSS：

.textarea-wrapper {
    display: inline-block;
    padding-top: 1px; /* - margin-top of textarea */
}
.textarea-wrapper textarea {
    vertical-align: text-top;
    margin-top: -1px; /* - (border-top-width + padding-top) */
}

我更新了您的jsFiddle。

CSS vertical-align：带表，表格和div的基线

2 个答案: