對齊基於網格的表單元素及其標籤

我們需要在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

對齊基於網格的表單元素及其標籤

回答

相關問題