具有灵活标签的 CSS 无表格表单答案

【问题标题】：Css tableless forms with flexible label具有灵活标签的 CSS 无表格表单
【发布时间】：2012-05-30 09:44:35
【问题描述】：

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

<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，然后将其作为宽度分配给它们的父级，但这似乎是一个麻烦的解决方案。

【问题讨论】：

在 jQuery 中创建它是微不足道的。附言你确定你不应该只使用一张桌子吗？
它给了我更多的灵活性，因为有时我希望我的表单只是水平的，有时是纯垂直的，这让我想保持我的 html 尽可能干净

标签： jquery html css forms label

【解决方案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 中测试。

【讨论】：