1

我们有一个要求，将表单元素布置在 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>

4

2 回答 2

1

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

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

label {
    min-height: 3em;
}

label span {
    vertical-align: -3em;
    display: inline-block;
}
于 2013-09-25T13:38:35.850 回答
1

小提琴：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-25T13:58:10.213 回答