CSS vertical-align：带表，表格和div的基线-Java 学习之路

我'm trying to build a form that contains inputs, textareas and block elements, each with a label. In order to get a flexible grid, I'米使用一张 table . 对于标签和输入/ textarea的匹配垂直对齐，我设置了 vertical-align: baseline; ，它适用于输入和textareas . 但不是div（see this jsFiddle） . div的标签因此在单元格的底部对齐，但我希望它在顶部，即基线应该在顶部 .

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

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

2 回答

0
使用以下代码解决您的问题：
```
td, label, textarea {
            vertical-align: top;
        }
```
回复于 2024-04-16T22:48:29+08:00
0
您的div必须至少有一个字符（例如＆nbsp;） .

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

作为developer.mozilla.org said，

HTML规范没有定义<textarea>基线的位置 .

我找到了解决方法，但它改变了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 .
回复于 2024-04-16T22:48:29+08:00

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

2 回答

相关问题