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/

如何在不使用HTML表的情况下获取文本输入以进行对齐？

2 个答案: