Вёрстка сайта. Центрируем меню. Ненумерованные списки ul

Итак, в интернете об этом написано огромное количество статей. И множество верстальщиков используют ненумерованные списки – ul для создания горизонтального меню. В большинстве случаев дизайнер или заказчик ставят задачу расположить такое меню строго по центру страницы.

Рассмотрим центрирование меню для ненумерованных списков ul фиксированной и произвольной длинны. Пример первый, центрирование ul меню с фиксированной длинной. Здесь, впрочем, всё просто. Для этого нам понадобится всего лишь несколько css правил. Допустим, наше меню выглядит так:

HTML:

<div class="menu-holder">
<ul class="menu">
 <li><a href="#" class="first">Пункт первый</a></li>
<li><a href="#">Пункт второй</a></li>
<li><a href="#" class="last">Пункт третий</a></li>
</ul>
</div>

Зададим menu-holder 100% ширину. И присвоим text-align: center для внутренних элементов (что позволит нам расположить пункты меню по центру в Internet Explorer). Ul присвоим ширину в 400 пикселей, назначим блочный вид (display: block) и установим отступы margin: 0 auto (позволит отцентрировать нам меню в других браузерах).

Дочерним элементам списка li зададим фиксированную длину, блочный вид (display: block) и назначим обтекание текстом по левому краю (float: left):

CSS:

    .menu-holder{
        width: 400px;
        text-align: center;
        border: 1px solid #000;
        clear: both;
        float: none;
        margin: 0 auto;
    }
    .menu-holder ul.menu{
        display: block;
        width: 400px;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        height: 27px;
        list-style: none;
    }
    .menu-holder ul.menu li{
        display: block;
        float: left;
        width: 120px;
        border: none;
        border-right: 1px solid #000;
        height: 27px;
        text-align: center;
        padding: 0 5px;
        list-style: none;
        background: none;
    }
    .menu-holder ul.menu li.last{
        border-right: none;
    }

Что же делать, когда заранее ширина меню ul неизвестна. Есть множество способов, например с двумя внешними блоками и центрированием путём отрицательных отступов (как-то сложно, и выглядит в некоторых случаях очень неожиданно). Но самое простое решение центрирования списков ul при вёрстке меню выглядит так:

HTML:

<div class="menu-holder">
<ul class="menu">
 <li><a href="#" class="first">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#" class="last">Пункт 4</a></li>
</ul>
</div>

Зададим внешнему menu-holder контейнеру 100% ширину, назначим выравнивание по центру. Назначим ul авто ширину (width: auto) и присвоим строчный вид (display: inline), внутри контейнера ul зададим выравнивание по центру (text-align: center). Каждому дочернему элементу списка li присвоим строчный вид (display: inline). Вот и всё.

CSS:

    .menu-holder{
        width: 100%;
        text-align: center;
        clear: both;
        float: none;
    }
    .menu-holder ul.menu{
        display: inline;
        width: auto;
        padding: 0;
        height: 27px;
        list-style: none;
        white-space: nowrap;
        border: 1px solid #4994D7;
    }
    .menu-holder ul.menu li{
        display: inline;
        border: none;
        border-right: none;
        line-height: 27px;
        height: 27px;
        text-align: center;
        padding: 0 5px;
        list-style: none;
        background: none;
        border-collapse: collapse;
        border-right: 1px solid #4994D7;
    }
    .menu-holder ul.menu li.last{
        border-right: none;
    }

Примечание: чтобы вытянуть в одну строчку и не «завалить» меню, когда пунктов в нём будет больше его длинны, устанавливаем white-space: nowrap для ненумерованного списка.

Совет: если Вы не будете делать выпадающее меню, добавьте также в css для ненумерованного списка стиль overflow: hidden, или хотя бы overflow-x: hidden (хоть нестандартное css правило, но широко поддерживается браузерами).

Совет: давайте уникальное классовое имя для первого и последнего дочерних элементов li ненумерованного списка, чтобы иметь возможность изменить их стиль (в приведённом примере мы скрываем правую границу последнего пункта меню c классом last).

Совет: высотой элементов со строчным видом (display: inline) можно управлять с помощью отступов (padding), высоты шрифта (font-size), line-height.