Question

我试图创建动态宽度字段输入，以便它们延伸到div的宽度。

如果一条线上有两个输入，它们将动态分割可用空间以填充100％的div。

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

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

令人惊讶的是，这很难与我确定它的常见程度有关。

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

Answer 1

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

您可以使用length或size()以确定元素数量，然后将css设置为相同

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

Answer 2

使用JsFiddle进行一些快速测试（BTW，请发布示例代码以便我们可以看到您迄今为止所做的事情）给了我这个：

<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时，这应该是相当直接的。但是，如果标签也可能不同，这将使计算变得更加复杂。

带标签的动态输入宽度

2 个答案: