Jquery 带标签的动态输入宽度

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

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

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

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

令人惊讶的是，我确信这一定很常见，但很难做到这一点

---

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

您可以使用

length

或

size（）

来确定元素的数量，然后将css设置为执行相同的操作

---

这里是一个粗略的模型：

使用JSFIDLE进行一些快速测试（顺便说一句，请发布示例代码，以便我们可以看到您迄今为止所做的工作）给了我以下信息：

<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>

内
In2
内
In2
在3
内
In2
内
In2
In2

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

---

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

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