сделать вход, чтобы заполнить оставшуюся ширину этикетки

Question

Я пытаюсь добиться следующего в HTML:

• вход внутри элемента этикетки (а не использовать идентификаторы и метки для)
• вход должен занимать 100% какая бы ширина ни оставалась

Это не должно быть так сложно, но я пробовал много подходов из других примеров; использование поплавков, переполнение: скрытое, ограничение высоты окружающих элементов и т. д. Не имеет также ширины 100%, но это не вариант.

Причина, по которой я скорее не использую функцию label-for (которая работает), состоит в том, что на одной странице будет несколько одинаковых полей ввода. Они довольно сложны, поэтому я создаю их вручную, а затем клонирую их с помощью jQuery N раз, что тогда будет ужасно ломаться при использовании идентификаторов.

Базовая точка:

input { 
 
    width: 100%; 
 
}

<label> 
 
    name: 
 
    <input type="text" /> 
 
</label>

Подготовил скрипку здесь: https://jsfiddle.net/8uuhhcon/

Answer 1

Try Flexbox

label { 
 
    display: flex; 
 
} 
 

 
input { 
 
    flex: 1; 
 
}

<label>name: 
 
    <input type="text" /> 
 
</label>

Answer 2

Если вы можете обернуть имя: в пролете или так, как <span>name:</span>, вы можете попробовать таблицу CSS.

label { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
span, input { 
 
    display: table-cell; 
 
} 
 
span { 
 
    width: 1%; /*give a small value*/ 
 
    white-space: nowrap; /*prevent wrapping i.e. "user name"*/ 
 
    vertical-align: middle; /*or top/bottom as needed*/ 
 
} 
 
input { 
 
    width: 99%; /*give a large value*/ 
 
}

<label> 
 
    <span>name:</span> 
 
    <input type="text" /> 
 
</label>