jquery - CSS 和标签输入对齐与表格

Question

这就是我想要完成的:

First Name: Textbox 
Last Name: Textbox 
... 
more labels with unknown widths: more text boxes

• 使用表格很容易做到这一点
• 使用 CSS 也非常简单，只要您以某种方式指出 标签的宽度(百分比或硬编码)
• 使用 jquery 重新计算最大宽度并将其分配给所有 标签也很简单

问题 以上都不是优雅的。

我想要一个可以在我的所有网站上使用的通用 CSS，我可以在其中为我的输入显示一组右对齐的标签，如果稍后我的其中一个标签的文本发生更改，我不必重新部署我的整个代码只是为了改变该死的宽度值

类似于:

<div class="labelInputArea">
    <label for="userName" class="lable">User Name:</label>
    <input name="userName" type="text" value="" />
</div>
<div class="labelInputArea">
    <label for="password" class="lable">Password:</label>
    <input name="password" type="text" value="" />
</div>
<div class="labelInputArea">
    <label for="longText" class="lable">Some Long Label:</label>
    <input name="longText" type="text" value="" />
</div>

在我的 .css 中我会有这样的东西:

.labelInputArea 
{
    display:block;
}
.labelInputArea .label
{
    text-align:right;
    display:inline;
}

.labelInputArea input
{
    text-align:left;
    display:inline;
}

Answer 1

听起来您本质上是在不使用表格的情况下追求表格布局。 在这种情况下，只需使用 CSS 表格行/表格单元格样式即可:

.labelInputArea 
{
    display:table-row;
}
.labelInputArea label
{
    text-align:right;
    display:table-cell;
}

.labelInputArea input
{
    text-align:left;
    display:table-cell;
}

在这里 fiddle : http://jsfiddle.net/x5c8N/

对于它的值(value)，我可能会坚持使用固定宽度的标签来包裹它的内容，例如

.labelInputArea 
{
    display:block;
    padding-top:5px;
}
.labelInputArea label
{
    width:150px;
    display:inline-block;
}

.labelInputArea input
{
    vertical-align:top;
}

http://jsfiddle.net/n4xzF/1/

因为我更喜欢使用垂直空间而不是水平空间的设计，但这只是我的偏好:)