Привычный всем html-код для меню:
CSS для горизонтального меню:
.menu{
width: 700px; /* ширина обертки меню */
height: 30px; /* высота */
margin: 0 auto; /* центрирование обертки! меню */
background: #30a8c3; /* цвет фона */
}
.menu ul li{
list-style: none; /* убираем маркеры */
float: left; /* выстраиваем пункты меню по горизонтали */
}
.menu ul li a{
text-decoration: none; /* убираем подчеркивание ссылки */
display: block; /* делаем ссылки блочными */
padding: 2px 10px; /* отступы */
color: #FFFFFF; /* цвет ссылок */
}
Но, как мы видим, меню не отцентрировано внутри блока-обертки и все пункты прижимаются к левому краю (float: left):
Первое, что приходит в голову,- использование margin: 0 auto или text-align: center. Но:
- margin: 0 auto подразумевает фиксированную ширину, которая для пунктов меню заранее неизвестна;
- text-align: center в <ul> не работает, если для <li> задано float: left.
Сразу отбросим первый вариант и попробуем что-то сделать со вторым.
Итак, если нам нужно, чтоб пункты меню отображались по-горизонтали без float: left;, можно применить display: inline-block; для тега <li>. После этого можно задать в теге <ul> выравнивание содержимого по центру:
.menu ul{
text-align: center; /* центрируем содержимое */
}
.menu ul li{
list-style: none; /* убираем маркеры */
display: inline-block; /* вместо float: left; */
}
