Как выроынить элементы навигации по одному уровню?

Question

[gleendo]

В общем возник вопрос, как выровнить все элементы навигации по одному уровню?
Вообще чет не понимаю..
Вот скрин меню если что:


Как вообще сверстать данную навигацию? набросайте пожалуйста

Вот все что смог наверстать, но думаю здесь вообще нич правильного нет. codepen.io/evg_/pen/XdexdB
Помогите нормально сверстать эту навигацию.

PS. Ну с виду вроде все на одном уровне, но это если четко указать высотку поиску. и теперь как сделать чтобы кнопка входа была тоже на одном уровне.?

Answer 1

[Максим]

а line-height не справляется с этим ?

вот мой пример - тупой не много пример - но смысл ясен codepen.io/Geyan/pen/pyWxBO?editors=110

можно не много модернизировать - поставить все эли ul в ряд и другим способом

но вот ещё один пример - мне кажется более лучший codepen.io/Geyan/pen/MyEPNL?editors=110

Comments

[gleendo]

Максим Жаров Вот вроде похоже, но теперь кнопка входа не на уровне, и правильно ли все спозицтонировано? codepen.io/evg_/pen/XdexdB

[Максим]

con_: у вас там огромный косячёк - и стоит вот такая штука input без form и это не правильно так как php обрабатывает именно form - собирает всю инфу и отправляет в обработку - но хотя суть ни в этом но как дополнение

У вас стоит min-width в шаблоне 1140px - вот это не верно - у вас либо media должно быть - тюе отображение на маленьких экранах либо min-width: не имеет смысла

[Максим]

con_: почему вы не рассматриваете вёрстку на flexbox ?

[gleendo]

Максим Жаров: Даже не знаю, я до флексбоксов как то еще не дорос. Я просто хотел сверстать макет как знаю. Но вот в самом начале возникла проблема что я не знаю как сверстать навигацию, вернее выровнить все элементы на одном уровне.
Блин вот столько траблов. Вот сейчас вроде как выглядит как надо, но правильно все там я не уверен. Бесит что не получается.

[Максим]

con_: codepen.io/Geyan/pen/YqEwxO?editors=110 мне казалось я уже показывал

Answer 2

[Michael Peteichuk]

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

Comments

[gleendo]

Michael Peteichuk codepen.io/evg_/pen/XdexdB
Все влезает, помогите разобраться с правильностью позицонирования и ка сделать что теперь и кеопка входа была на одном уровне со всеми

[Michael Peteichuk]

con_: я так понимаю вы используете bootstrap, но если по стандарту, то оно так и будет, можно только поиграться еще, но все же, в блок main-nav clearfix добавьте свойство min-width: 853px; я проинспекторил за вас, но в этом случае полоса прокрутки появится, ее можно решить изменением отступов между li (проблема в том, что дизайн не совместим в нашем случае с bootstrap). так что, лучше использовать свой стиль и т.п. take.ms/nrXmY это скриншот. вы не пугайтесь за полосу прокрутки, это все можно исправить, поиграйтесь с take.ms/KjXr0 это точно поможет, или по крайней мере даст новые идеи.

[Michael Peteichuk]

con_: опять же, как я сказал, что в блок по ширине не помещаются следующие элементы и по этому вылетают блоки. сделайте фиксированную ширину 750 и при этом используйте media query

[gleendo]

Michael Peteichuk: Не использую бутстрап. Ширина центровщика(class="container") равна 1140px + по 30px padding слева и с права. итого 1200px. поэтому блоки у вас смещаются. навигация не адаптивная(не в приоритете это пока что.).
Мне нужно было просто сделать элементы навигации на одном уровне. Я вроде как сделал это, но не знаю, правильно ли. задание для меня было таким