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（）（在同一页面上有时几种不同的形式），并从中选择最大值，然后将其作为宽度指向它们的父级，但这似乎是一个麻烦的解决方案。 / p>

Answer 1

好的，这个怎么样......

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

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

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

1 个答案: