1

我有管理站点，其中包含许多表单，这些表单往往通过对齐标签来设置样式：

<form>
    <label for="name"><input type="text" name="name">
    <label for="name"><input type="text" name="name">
    <label for="name"><input type="text" name="name">
</form>

我通常会做些什么来获得效果：

label{
    width: 150px /* fixed that is */
    text-align: right;
}

这很好用，但是当我的多个表单有时具有非常不同且更长的标签名称时，如果我希望所有表单在垂直线上完美对齐，这会迫使我为最大的元素提供最小所需的宽度。但是当内容很少时，巨大的差距就来了，结果总体上不够灵活。

有没有人有解决这个问题的想法？Css 或 jQuery（不确定它是否有效）可能吗？但是我对 jQuery 的想法是从特定表单循环 .width() （有时同一页面上几乎没有不同的表单），并从中选择 max，然后将其作为宽度分配给它们的父级，但这似乎是一个麻烦的解决方案。

4

1 回答 1

0

好吧，这个怎么样...

使用百分比宽度和浮动：左。长标签会包裹在多行上（我知道这不是您所要求的）。

HTML：

<form>
    <label for="name">lka;sjdl kfa jsldkkfjlkasdjf alkdsjalkfk asdfasd asd fasdf dfdsa afsd afdsf asdfsdads jdaslk </label>
    <input type="text" name="name">
    <label for="name">ljlkjljljljljlkj</label>
    <input type="text" name="name">
    <label for="name">asdfasfdsasdaf</label>
    <input type="text" name="name">
</form>

CSS：

form {
    width:400px;
}
label {
    width: 48%;
    float:left;
    clear:both;
}
input {
    width: 48%; 
    float: left;
}

我发现你需要让总宽度加起来略低于 100%，以考虑继承的边界和边距等。我确定 49% 可以通过反复试验来工作。

仅在 Firefox 中测试。

于 2012-05-31T08:48:50.633 回答