css - 如何使元素在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/divs 而不是 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 表格显示属性保存到另一天。