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

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

这是小提琴：http://jsfiddle.net/nJZ6Y/19/

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

label {
    min-height: 3em;
}

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

Answer 2

小提琴：http://jsfiddle.net/nJZ6Y/18/

我在标签元素周围添加了一个框，并将其与底部对齐。这仅在您知道文本的近似最大高度时才有效。如果文字长于该文本，它将从容器中掉出并隐身。弗雷德的回答更优雅。 仅供参考：你的lorem ipsum中的Bonorum是一个有趣的词......

    .label-box {
        position: relative;
    }
    .label-box {
        height: 50px;
    }
    label { 
        float:left; 
        width:100%; 
        color:#fff; 
        position: absolute; 
        bottom: 0; 
        left: 0;}