对齐基于网格的表单元素及其标签 [英] Aligning grid based form elements and their labels

问题描述

我们有一个要求，表单元素放在3个独立的列中。标签可以具有不同量的文本，表单元素将主要是输入框和文本区。

we have a requirement where form elements are laid out in 3 separate columns. The labels can have varying amounts of text and the form elements will be mainly input boxes and textarea's.

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

The designers want to ensure that the input elements are vertically aligned correctly.We are unable to use specific padding/margins as this is not flexible when the app is localized.

请参阅下面的图片。第一行显示我们遇到的问题，第二行是我们想要的布局。我们想到的唯一解决方案是将标签放在一个单独的行中到实际的表单元素。我不能想象这将是良好的辅助功能。

Please see the image below. The first row shows the issue we are experiencing and the second is how we would like it laid out. The only solution we have thought of is placing the label in a separate row to the actual form element. I cant imagine this would be good for accessibility.

任何提示真的赞赏。

>

这里是一段代码，到目前为止 - http：// jsfiddle .net / nJZ6Y / 4 /

Here is a fiddle of the code so far - http://jsfiddle.net/nJZ6Y/4/


< div class =grid_4>
< div class =content>
< label> TR 1 TD 1< / label>
< input type =text/>
< / div>
< / div>
< div class =grid_4>
< div class =content>
< label>凤梨发酵罐佐料Pharetra< / label>


<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>

推荐答案

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

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

You have to add a span inside each label, then add these CSS rules.

label {
    min-height: 3em;
}

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

这篇关于对齐基于网格的表单元素及其标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！