Элементы share 100% width CSS

Question

Мне нравится составлять макет с несколькими элементами, которые разделяют 100% ширину родительского элемента. Найдено решений: how-can-multiple-dynamically-sized-divs-share-100-width. Проблема здесь, мне всегда нужны некоторые элементы-обертки, такие как div. Как реализовать это только с вводом, элементами кнопки и так далее.

<form> 
    <button style="width: 20px;"></button> 
    <input style="width: 100%;" type="text"/> 
</form> 

Answer 1

ввода и кнопки элементов являются встроенными элементами.

Просто добавьте правило display: block, чтобы сделать правило width: 100% неявным.

Элементы уровня блока наследуют ширину их родителя по умолчанию и будут отображаться один под другим.

Для формы, вы можете использовать этот код:

HTML

<form> 
    <input /> 
    <button /> 
</form> 

CSS

form input, 
form button{ 
    display: block; 
} 

Answer 2

Если вы всегда хотите, чтобы они имели 100% ширину, то вы можете использование

min-width: 100%;