Почему инпут расположен криво?

Question

[Глеб Жуков]

Вот сюда перенёс хедер который делаю в одном сайте. Кто-нибудь знает почему инпут с кнопкой смещены вниз и находятся не на одной линии с остальными элементами ? И почему между кнопкой и инпутом расстояние, хотя padding 0 margin 0.

Comments

[Сергей Горячев]

Глючная какая-то песочница, аж браузер повис.

Answer 1

[Сергей Горячев]

https://jsfiddle.net/vf5t8mn6/
Перенес форму в коде выше навигации.
Тут или ограничить ширину nav с меню, или форму поднять.
Навигация получает width: 100%; и вытесняет форму.

https://jsfiddle.net/vf5t8mn6/1/
А расстояние между инпутом и кнопкой потому что они по умолчанию display: inline-block;
Между инлайновыми блоками всегда присутствует какой-то непобедимый отступ (не считая костылей).
Проще победить задава им обоим float: left; .

Answer 2

[Petr Flaks]

Кто-нибудь знает почему инпут с кнопкой смещены вниз и находятся не на одной линии с остальными элементами ?

Потому что у элемента <nav> задан display: block. Замените на display: inline-block. Также уберите у формы float: right и добавьте ей display: inline-block.

почему между кнопкой и инпутом расстояние, хотя padding 0 margin 0.

Потому что <input> и <button> - это inline-блоки. Поэтому между ними перенос строки браузер превращает в пробел. Вам поместить их в одну строку вот так:

<input type="text" placeholder="Search on site" name="search" required><button type="submit">O</button>