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+的标签width:。

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

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

Answer 2

首先，在您的 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;
}

如果您希望它们更靠左，请调整 margin-left 属性。http://jsfiddle.net/8wRT3/6/