分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – CSS和标签输入对齐与表格，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

解决方法

@H_618_32@ 听起来你基本上是在没有使用表格的表格布局之后.
在这种情况下,只使用CSS table-row / table-cell样式可以工作：

.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/

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