CSS和标签输入对齐与表格

Question

这就是我想要完成的事情:

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

• 使用表格很容易实现这一目标
• 只要您以某种方式指示标签的宽度(百分比或硬编码),使用CSS也很容易
• 使用jquery重新计算最大宽度并将其分配给所有标签也很容易

问题以上都不优雅.

我想要一个可以在我的所有网站上使用的通用CSS,在那里我可以为我的输入显示一个右对齐的标签组,如果稍后我的一个标签的文本被更改,我不需要重新部署我的整个代码只是为了改变一个darn宽度值

就像是:

<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;
}

在这里小提琴:http: //jsfiddle.net/x5c8N/

对于它的价值,我可能会坚持使用固定宽度的标签来包装它的内容,例如

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

.labelInputArea input
{
    vertical-align:top;
}

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

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