Правильно ли я выравниваю горизонтальное меню по центру?

Question

[GoodProject]

Доброе.

Правильно ли я выравниваю горизонтальное меню?



Т.е прописываю в ксс то, что это блок, и прописываю его размеры.

Без этого он просто не выравнивается по центру, в отличии от других блоков. Ну это неудивительно.

Просто это не очень удобно, нужно точно прописать его размеры, чуть что - сразу встанет косо, может профи делают это другому?

И ещё вопрос.

При приближении, отдалении происходит следующее, текст начинает залезать на другие строки.

Забыл как это исправить..

Вот пример:

Answer 1

[bromzh]

у внешнего блока (в котором меню) пишешь text-align: center. У меню пишешь display: inline-block. Элементы тоже надо сделать inline-block.

UPD
jsfiddle.net/329f5e3f
UPD2
Плюс в том, что меню тогда необязательно делать фиксированной ширины, его размер будет вычисляться на основе детей и паддингов. Собственно размер детей можно легко контролировать паддингами. Единственный ньюанс - надо ставить коммент между li, иначе между ними будет вставать пробел и расстояние между такими элементами будет ненулевым.

Comments

[Alexander Mischuk]

Удалить комментарии и задать для ul font-size 0. Это уже много раз обсуждалось.

[GoodProject]

Спасибо, попробовал - работает. Момент с font-size 0 тоже учёл )

Осталось только сделать так, что бы при зумировании текст не менял форму и не съезжал вниз.

[Pavel Yakovlev]

что за ерунда с комментом-получится говнокод какой-то

[bromzh]

Alexander Mischuk: ага, а потом восстанавливать его надо для дочерних. А если понадобится использовать, например, заголовки в таком li, то для них надо заново прописывать размеры (которые могут вообще задаваться юзерагентами браузера). Отлично просто.
@GoodProject: Текст внутри li? Можно задать min-width.
Pavel Yakovlev: это старый и самый простой вариант решения проблемы. Есть ещё решения: css-tricks.com/fighting-the-space-between-inline-b...
Но раз это говнокод, то предложи свой более простой и красивый вариант решения, интересно послушать.

[Alexander Mischuk]

Согласен с Пашей, это говнокод. Размер заголовков нужно задавать вначале проекта, тогда его не нужно переопределять. Так же, как и ссылки. Для текста внутри li достаточно вначале проекта задать ul li базовый шрифт вместе с body и остальным.
Одна строка кода существенно упрощает разметку и делает её более очевидной.

[GoodProject]

@bromzh: да, текст внутри li, при масштабировании всё съезжает, да и вроде не только в li, и картинки съезжают, у многих такой баг видел, вариант с min-width уже знаю. )

[bromzh]

Alexander Mischuk: А что же ты со своим другом пашей молчишь про проблемы, которые возникают, если использовать твой метод? Может ты их и не знаешь? Давай я расскажу тогда:
1) Твой вариант не работает на андроиде: codepen.io/stowball/details/LsICH
2) Твой вариант ломает рендер шрифтов на сафари: cdn.css-tricks.com/wp-content/uploads/2012/04/Scre...
3) И самое главное: при использовании твоего чудо варианта нельзя задать шрифты для ul > li в емах, только в неотносительных единицах (пикселях, пунктах и т.д.). А это значит - прощай адаптивная вёрстка. Надо объяснить, чем плохи пиксельные шрифты и как они по-разному будут выглядеть на ретине и на мобилке?

Что в иттоге? Пока все нормальные люди пользуются методами без css с font-size:0 и живут счастливо, ты создаёшь себе проблемы на пустом месте.

[Alexander Mischuk]

@bromzh: У этого метода, действительно, есть небольшие проблемы кроссбраузерностью, и нужно знать где и когда его использовать, но в данном случае(и в большинстве случаев с заурядными меню) это прекрасный способ и он куда лучше, чем комментарии вокруг элементов списка.
Вы можете использовать абсолютно любые способы для решения одних и тех же задач и можете продолжать ставить комментарии. Я думаю, что это нравится многим ребятам, которые работают с кодом после Вас.
Удачи.

[bromzh]

он куда лучше, чем комментарии вокруг элементов списка.
Да чем он лучше-то? Хоть один явный плюс назови. И хоть один минус моего подхода.
Очень многие крупные сайты используют комментарии, это распространённая практика. А эти костыли с размером шрифта только создают новые проблемы и всё. Как раз-таки люди, которые будут поддерживать твой код могут в неожиданном месте получить проблемы. И им придётся лопатить весь css, пытаясь понять, что же не так, и почему на компе всё нормально, а на мобильнике выглядит не так. Плюс, про адаптивность я уже сказал. Дело тут не в том, что меню заурядное и простое, а в том, что размеры шрифтов при разных разрешениях будут плохими. И это реальная проблема, а не надуманная, типа "html выглядит не очень".

[GoodProject]

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

Answer 2

[personaljs]

если написание в меню в одну строку , можно добавить к ul white-space:nowrap; и тогда не будет переносов строк

Comments

[GoodProject]

Это не то. Нашёл решение через min-width.

Answer 3

[Владислав]

Люди, подскажите какой это редактор заскринен?

Comments

[Trow_eu]

brackets