Изменить ширину ввода в ul

Question

Я получил записи ul и li, содержащие метку с текстом и поле ввода. ul имеет ширину 100% содержащего элемента div. Ширина div может быть изменена, и я хотел бы также изменить размер входов.

Входные данные должны иметь такой же размер, который увеличивает ширину и ширину списка. Поскольку li имеют разную ширину, в зависимости от уровня в списке, я не могу работать с шириной в% (верно?). Есть ли способ сделать это? Лучше всего будет чистый CSS.

Я попробовал иллюстрацию поведения:

- Text1     [Input]
- Text2     [Input]
  - Text3   [Input]
- Text4     [Input]

Когда окно широко, оно должно выглядеть так:

- Text1     [    Input  ]
- Text2     [    Input  ]
  - Text3   [    Input  ]
- Text4     [    Input  ]

Answer 1

ИСПОЛЬЗУЯ FLEX:

.ur_beloved_class li {display:flex}
.ur_beloved_class label {width:10em}
.ur_beloved_class input {flex-grow:1}

<ul class="ur_beloved_class">
  <li><label>input1 blah blah</label><input type="text"></li>
  <li><label>input1</label><input type="text"></li>
  <li><label>input1</label><input type="text"></li>
  <li><label>input1</label><input type="text"></li>
</ul>

БЕЗ ФЛЕКСА: Если ширина ввода должна зависеть от ширины окна (области просмотра), использовать:

.ur_beloved_class li input {
   width: 60vw; /* Viewport Width */
}

Это может испортить ярлык, если окно слишком узкое. Таким образом,

.ur_beloved_class li label {
    min-width:10em; /* Font size relative */
}

Эти два вместе с float:left или display:inline-block должны обеспечить желаемые результаты (в большинстве случаев). Было бы неплохо иметь пример кода.

Answer 2

Не видя вашего реального кода, это немного сложно, но вы можете использовать ширину%

Попробуйте что-то вроде

label, input {
width:45%;
display:inline-block;
padding:0px 2% 5px;
}

Возможно, вам понадобится адаптивный CSS-запрос, чтобы сделать их стеками и быть шире на небольших устройствах. Или, может быть, попробуйте минимальную ширину, чтобы убедиться, что они не слишком сильно сокращаются.