Как поставить два input на всю строку?

Question

[injectine]

Как поставить два input, чтобы сама форма и кнопка занимали весь блок (напр. форма - 70%, а кнопка - 30%)?
Проблема в том, что при выставлении значения width: 30% для кнопки кнопка выпадает к низу, а с width: 20% не доходит до конца блока.

Comments

[Adamos]

Пробелы между ними уберите.

Answer 1

[FeST1VaL]

input - display: inline-block;
Если между ними в верстке поставить пробел, то появляется между ними пару пикселей которые как раз мешают)
Решения тут по сути 3)

1. Сделать flex/grid
2. Задать font-size: 0;
3. Убрать пробел между input

Comments

[Adamos]

Как только люди не извращаются, лишь бы

<div><input type="" class="input1"><input type="text" class="input2"></div>

не писать

[FeST1VaL]

Adamos, ну бывает) ну я реализовал его проблему/пример) так то визуально в коде проще чтобы друг под другом было)

[Adamos]

Артем Будин, имхо, нулевой шрифт внутри дива, прописанный где-то в другом месте, устанавливает в эту форму грабли большего калибра, чем строчки внутри самой формы, которые нельзя переносить. И уж если решать стилями - то здесь и банальный float: left вроде бы должен справиться...

[FeST1VaL]

Adamos, нефига не понял) это ж для примера навешано на сам тэг) float изначально был придуман для картинок вроде как, а не блоков) так что тоже такое себе решение)