Динамическая ширина ввода с ярлыками

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, это должно быть довольно прямолинейным. Однако, если метки могут также меняться, это сделает вычисления более сложными.