Выровнять меню по центру по горизонтали и убрать list style
так выглядит при тесте:
Отслеживать
33.9k 25 25 золотых знаков 130 130 серебряных знаков 222 222 бронзовых знака
задан 27 авг 2015 в 3:41
13 1 1 золотой знак 1 1 серебряный знак 3 3 бронзовых знака
Немного отредактировал ответ, надеюсь что смысл сохранил.
27 авг 2015 в 6:42
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
27 авг 2015 в 12:56
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
#nav < background: #345; position: fixed; left: 0; top: 0; width: 100%; height:50px; text-align: center; display: inline; vertical-align:middle; >#nav a < text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 19px; color:#FFF; padding: 5px; >#nav a:hover < background: #FFF; color: #345; >ul < margin: 0; padding: 12px; list-style: none; >li
Отслеживать
ответ дан 27 авг 2015 в 7:11
Узбек Баха Узбек Баха
2,548 4 4 золотых знака 20 20 серебряных знаков 45 45 бронзовых знаков
спасибо, почти то что нужно) как сделать фон на всю ширину, а не только на кнопки?
27 авг 2015 в 17:55
@Valeryyy обновил ответ
1 сен 2015 в 11:23
#nav < display: block; position: relative; >#nav ul < width:300px; margin:0 auto; display:block; >#nav ul li a < background-color: #FFF; text-align: left; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000; >#nav ul li
Отслеживать
ответ дан 27 авг 2015 в 6:56
Aslan Kussein Aslan Kussein
1,776 2 2 золотых знака 14 14 серебряных знаков 35 35 бронзовых знаков
- html
- css
- меню
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать меню по центру?
чтобы работал марджин, нужна адекватная ширина у родителя. в данном примере у блока ul ширина 1000 пикселей, хотя его реальная ширина — 550. попробуйте изменить и посмотрите на результат. кроме того нужно очистить потом (clearfix, например), чтобы размеры ul считались правильно.
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Меню центрируется, просто у Вас указана ширина в 1000px, а количество элементов списка не набирается на эту ширину и они выравниваются по левому краю и тут возникает «оптический обман» ).
1) Стилизовать .main-menu (указав, например, ему фон)
2) Выровнять элементы списка относительно родителя
.main-menu < width: 1000px; list-style: none; padding: 0; font-size: 24px; margin: 0 auto; text-align: center; >.main-menu li
3) Либо подогнать ширину .main-menu под сумму width всех элементов списка.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
SirMustache @SirMustache
Еще можно задать
.main-menu
и перенести значение в
.main-menu li < font-size: 24px;>
чтобы убрать отступы между inline элементами.
Или отрицательный margin.
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 2 часа назад
- 21 просмотр
Как сделать — Меню в навигации по центру
Узнать, как создать панель навигации с ссылкой меню и логотипом по ценру.
Ссылка меню по центру
Создание верхней панели навигации
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Example
/* Добавить черный цвет фона для верхней навигации */
.topnav position: relative;
background-color: #333;
overflow: hidden;
>
/* Стиль ссылок внутри панели навигации */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>
/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover background-color: #ddd;
color: black;
>
/* Добавление цвета к активной/текущей ссылке */
.topnav a.active background-color: #4CAF50;
color: white;
>
/* Центрированный раздел внутри верхней навигации */
.topnav-centered a float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>
/* Выровненный по правому краю раздел внутри верхней навигации */
.topnav-right float: right;
>
/* Адаптивное меню навигации — отображение ссылок друг на друга, а не рядом друг с другом (для мобильных устройств) */
@media screen and (max-width: 600px) .topnav a, .topnav-right float: none;
display: block;
>
.topnav-centered a position: relative;
top: 0;
left: 0;
transform: none;
>
>
Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш учебник Как иделать — Отзывчивую верхнюю навигацию.
Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных барах.
Как выровнять горизонтальное меню по центру?
Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.
Горизонтальное меню по центру без выпадающих пунктов
Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.
Html-код
Css-код
*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 >#mainmenu ul < list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px >#mainmenu ul li < position: relative; left: -50%; float: left; margin: 0 10px; height: 40px >#mainmenu ul li a < color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; >#mainmenu ul li a:hover
Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.
Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden», иначе мы получим горизонтальную полосу прокрутки.
Вот и все, теперь наше меню выровнялось по центру. Теперь можете добавлять, хоть убавлять пункты, на позиционирование это не повлияет. Вы также можете использовать это меню на своих сайтах, просто изменив стили под ваш дизайн.
Горизонтальное меню по центру с выпадающими пунктами
Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.
Читайте также: Font-Face: подключение нестандартных шрифтов
Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».
Html-код
CSS-код
*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 >#mainmenu ul < clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 >/** Основные пункты **/ #mainmenu > ul > li < position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 >#mainmenu > ul > li > a < border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; >#mainmenu > ul > li:first-child > a < border: none >#mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a < color: #fff >#mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active < background: #666 >/* Выпадающие подпункты */ #mainmenu ul li ul < position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px >#mainmenu > ul > li ul li < background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; >#mainmenu ul li ul li a < border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; >#mainmenu ul li ul li.parent a < position: relative; >#mainmenu ul li ul > li.parent > a::before < border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; >#mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover < background-color: #444 >#mainmenu ul li:hover ul, #mainmenu ul li.hover ul < display: block >/* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul < opacity: 1; visibility: visible; margin: 0; >#mainmenu ul li ul li ul
Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.
Выравнивание меню по центру с помощью flexbox
Выровнять меню по центру можно также, применив новое правило в css — flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.
Читайте также: FlexMenu — сворачивающееся адаптивное меню на jQuery
Код CSS
*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 >#mainmenu ul < display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; >/** Основные пункты **/ #mainmenu > ul > li < position: relative; height: 40px; padding: 0; margin: 0 >#mainmenu > ul > li > a < border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; >#mainmenu > ul > li:first-child > a < border: none >#mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a < color: #fff >#mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active < background: #666 >/* Выпадающие подпункты */ #mainmenu ul li ul < position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px >#mainmenu > ul > li ul li < background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; >#mainmenu ul li ul li a < border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; >#mainmenu ul li ul li.parent a < position: relative; >#mainmenu ul li ul > li.parent > a::before < border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; >#mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover < background-color: #444 >#mainmenu ul li:hover ul, #mainmenu ul li.hover ul < display: block >/* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul < opacity: 1; visibility: visible; margin: 0; >#mainmenu ul li ul li ul
Как видим, изменились правила только для родительского списка — #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть здесь. Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!