html - 如何在不使用 HTML 表格的情况下使文本输入对齐？

Question

我需要一组(几“行”)标签/文本输入元素。我希望文本输入元素在不使用 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/

Answer 1

使用样式化的无序列表作为容器来管理间距。

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 + 宽度:。

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

参见:http://alistapart.com/article/prettyaccessibleforms