jquery - 具有灵活标签的 Css 无表格形式

Question

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

<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() (有时同一页面上有几个不同的表单)，并从中选择最大值，然后将其作为宽度分配给它们的父级，但这似乎是一个麻烦的解决方案。

Answer 1

好的，这个怎么样...

使用百分比宽度和 float :左。长标签会换行(我知道这不是您要的)。

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 中测试。