如何使元素在div中对齐

Question

我有一个包含很少元素的div，我在div中的标签和文本框没有很好地对齐，你可以看到截图.. 任何想法都要对齐这些合法的名称和商家名称以及文本框，因此所有文本框都应该从同一点开始

感谢

Answer 1

为标签和输入设置width：

.the-label {
    width: 160px;
}

.the-input {
    width: 220px;
}

Answer 2

这是你可以做到的一种方式：

http://jsfiddle.net/FmKfP/

Answer 3

您可以使用不可见的表格对齐它们。

<table border="0">
<tr><td>Legal Name:</td><td><input type="text"></td></tr>
<tr><td>Business Name:</td><td><input type="text"></td></tr>
</table>

Answer 4

你必须问自己哪个更糟糕：使用一个表或使用足够的标记，它看起来像一个表，但有spans / div而不是trs / tds。我认为在这种情况下表格很好（如果你使用过关系数据库，那么很多表只有2列的情况并不少见），其他人会向你保证它是邪恶的。

您可以使用已建议的标签元素上的宽度，也可以使用稍微不那么邪恶的CSS表格。

div.pseudo-row { display: table-row }
/* input might need to go in a container and have the container set to table-cell instead */
div.pseudo-row label, div.pseudo-row input { display: table-cell }

<div class="pseudo-row">
<label for="first-item">First item</label>
<input type="text" id="first-item" />
</div>

<div class="pseudo-row">
<label for="second-item">Second item</label>
<input type="text" id="second-item" />
</div>

http://www.vanseodesign.com/css/tables/

对于记录，我只是在这个实例中使用表并将CSS表显示属性保存到另一天。