带标签的动态输入宽度答案

【问题标题】：Dynamic Input Width with Labels带标签的动态输入宽度
【发布时间】：2012-06-14 21:08:19
【问题描述】：

我正在尝试创建动态宽度字段输入，以便它们拉伸到 div 的宽度。

如果一行中有两个输入，它们将动态分割可用空间以填充 100% 的 div。

如果一行只有一个输入，它将填满整个宽度。

问题是标签宽度和输入宽度都是未知的（响应式网页设计）。

令人惊讶的是，这很难做到，因为我确定它一定很常见。

http://imagepaste.nullnetwork.net/img/1339700574Screen%20Shot%202012-06-14%20at%203.04.59%20PM.png

【问题讨论】：

是的，请看图片链接。这是我能得到的最接近的。我不是在找人为我做这件事。我正在寻找一个概念来研究，看看这是否值得麻烦。
您可以使用 javascript / js 库作为选项吗？
我正在使用 Ruby、Rails、jQuery 进行开发。所以是的。

标签： jquery html css ruby-on-rails

【解决方案1】：

可以，使用 jQuery，您可以计算 div 中输入元素的数量，并相应地调整元素的宽度。

你可以使用length或者size()这样确定元素的数量，然后设置css也一样

这是一个粗略的模型：http://jsfiddle.net/6CqKK/

【讨论】：

【解决方案2】：

使用 JsFiddle 进行一些快速测试（顺便说一句，请发布示例代码，以便我们可以看到您到目前为止所做的工作）给了我这个：

<div style="width:100%;border:1px solid gold;">
    <div style="width:100%; border:1px solid silver;">
        <div style="float:left;width:45%">In1 <input style="width:90%;"></div>
        <div style="float:right;width:45%">In2 <input style="width:90%;"></div>
    </div>
    <div style="clear:both;width:100%;border:1px solid silver;">
        <div style="float:left;width:20%">In1 <input style="width:90%;"></div>
        <div style="float:left;width:20%">In2 <input style="width:90%;"></div>
        <div style="float:right;width:20%">In3 <input style="width:90%;"></div>
    </div>
</div>

<div style="clear:both">&nbsp;</div>

<table style="width:100%;border:1px solid gold;">
    <tr>
        <td style="width:49%;border:1px solid silver;">In1 <input style="width:60%"></td>
        <td style="width:49%;border:1px solid silver;">In2 <input style="width:60%"></td>
    </tr>
</table>
<table style="width:100%;border:1px solid gold;">
    <tr>
        <td style="width:29%;border:1px solid silver;">In1 <input style="width:60%"></td>
        <td style="width:29%;border:1px solid silver;">In2 <input style="width:60%"></td>
        <td style="width:29%;border:1px solid silver;">In2 <input style="width:60%"></td>
    </tr>
</table>

看到它here。正如您所看到的，这两个版本都不完全正确，但是像往常一样，基于表格的布局更加健壮，即使在搞砸了further 之后，我也无法让三列集正常工作，但使用表格很容易。

主要是计算百分比。当您使用 JS 时，这应该是相当简单的。但是，如果标签也可以变化，这将使计算变得相当复杂。

【讨论】：