如何在不使用HTML表格的情況下使文本輸入對齊？

我需要一套（幾個「行」）標籤/文本輸入元素。我希望文本輸入元素垂直對齊而不使用HTML表格。這似乎所有的標籤設置爲一個足夠大的寬度應該這樣做，但是，這並不工作：如何在不使用HTML表格的情況下使文本輸入對齊？

HTML

<label>Invoice #</label> 
<input type="text" id="invoiceNumber"></input> 
</br> 
<label>Date</label> 
<input type="text" id="date"></input>

CSS

label { 
    font-family: Consolas, 'Segoe UI', sans-serif; 
    margin-left: 10px; 
    min-width: 120px; 
}

的jsfiddle在http://jsfiddle.net/clayshannon/8wRT3/1/

來源

2013-09-25 B. Clay Shannon

你的意思是，像[this]（http://jsfiddle.net/EycNZ/）？ – insertusernamehere

由於@insertusername在此演示，真正的問題是標籤默認爲內聯，這意味着「寬度」不起作用。這就是需要改變的一切。 –

首先，在你的jsfiddle，「//」不是註釋掉CSS代碼正確的程序。你應該做的是這樣的：

HTML

<label>Invoice #</label> 
<input type="text" id="invoiceNumber"></input> 
<div style="clear:both;"></div> 
<label>Date</label> 
<input type="text" id="date"></input>

CSS：更改輸入到這一點：

input { 
    float:right; 
}

如果你希望他們更多的左邊，然後調整利潤率左屬性。 http://jsfiddle.net/8wRT3/6/

來源

2013-09-25 17:14:14 Lance

使用一個樣式化的無序列表作爲管理間距的容器。

ul, li { margin:0;padding:0;list-style:none } //add margins to adjust spacing 
li { clear:both }

使用標籤float:left + display:block + width：或display:inline-block + width:。

<ul> 
    <li><label>...</label> <input.... /></li> 
    ... 
</ul>

參見：http://alistapart.com/article/prettyaccessibleforms

來源

2013-09-25 17:13:04

如何在不使用HTML表格的情況下使文本輸入對齊？

回答

相關問題