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

我们需要在3个单独的列中布置表单元素。标签可以有不同数量的文本，表单元素将主要是输入框和textarea的。对齐基于网格的表单元素及其标签

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

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

任何提示真的很感激。

enter image description here

下面是代码的小提琴至今 - 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>

来源

2013-09-25 grimmus

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

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

label { 
    min-height: 3em; 
} 

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

来源

2013-09-25 13:38:35 fred02138

谢谢弗雷德，这是真棒。如果标签文本在某些情况下溢出到4行上怎么办？最小高度值是否需要适应这个？ – grimmus

@grimmus是的，绝对。你将不得不实验。如果您知道标签的最大行数，那将是有用的。另外，请检查浏览器兼容性，因为我正在使用IE10。 – fred02138

小提琴：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;}

来源

2013-09-25 13:58:10 Corey

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

回答

相关问题