css - 对齐基于网格的表单元素及其标签

Question

我们有一个要求，其中表单元素被布置在 3 个单独的列中。标签可以有不同数量的文本，表单元素主要是输入框和文本区域。

设计人员希望确保输入元素正确垂直对齐。我们无法使用特定的填充/边距，因为这在应用程序本地化时不灵活。

请看下图。第一行显示了我们遇到的问题，第二行是我们希望如何布置。我们想到的唯一解决方案是将标签放在实际表单元素的单独行中。我无法想象这对可访问性会有好处。

任何提示真的很感激。

到目前为止，这是代码的一部分 - http://jsfiddle.net/nJZ6Y/4/

<div class="grid_4"> <div class="contents"> <label>TR 1 TD 1</label> <input type="text" /> </div> </div> <div class="grid_4"> <div class="contents"> <label>Bonorum Fermentum Tortor Adipiscing Pharetra</label>

Answer 1

这是 fiddle :http://jsfiddle.net/nJZ6Y/19/

您必须在每个 label 中添加一个 span，然后添加这些 CSS 规则。

label {
    min-height: 3em;
}

label span {
    vertical-align: -3em;
    display: inline-block;
}