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

我需要一组（几个“行”）标签/文本输入元素。我希望文本输入元素在不使用HTML表的情况下垂直对齐。将所有标签设置为足够大的宽度似乎可以做到这一点，但这不起作用：

HTML

---

jsfiddle at

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

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>

...

---

请参阅：

首先，在JSFIDLE上，“//”不是注释CSS代码的正确过程。你应该做的是：

HTML

---

如果希望它们更向左，请调整“左边距”特性

你的意思是，就像@insertusernamehere演示的那样，真正的问题是默认情况下标记是内联的，这意味着“宽度”没有效果。这就是需要改变的一切。

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

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

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

input {
    float:right;
}