CSS: Средство от синдрома «лестницы»

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

Оригинал: http://css-tricks.com/prevent-menu-stepdown/
Автор: Chris Coyier (css-tricks.com)
Перевод: Александр Мусаев (paradigm.ru)

Всем, кто работал с «плавающими» HTML-элементами, должно быть известно, что при задании контейнеру значения CSS-свойства float:left, следующий за ним «всплывает» вверх, если это возможно. В подобной ситуации часто встречается одна проблема — позиционируемые элементы выстраиваются «лестницей».

Например, при оформлении таким образом меню, сделанного на основе ненумерованного списка (<ul>), браузер может отобразить его примерно так:

Рассмотрим пример корректного горизонтального форматирования элементов меню для следующего HTML кода:

<ul id="menu">
    <li><a href="#">My</a></li>
    <li><a href="#">Little</a></li>
    <li><a href="#">Menu</a></li>
</ul>

Для того, чтобы придать списку необходимый внешний вид, ссылки внутри него оформляются в виде блоков увеличенной ширины:

ul#menu li a {
    display: block;
    width: 130px;
    text-align: center;
    font-weight: bold;
    float: left;
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    background: #600;
}

(Прим. переводчика: при оформлении подобного меню, я бы дополнительно задал увеличенное значение верхнего и нижнего padding. Кроме того, сочетание фиксированной в пикселях ширины контейнера и размера шрифта, определенного в относительных единицах —, не слишком хорошее решение автора.)

При подобном оформлении, элементы меню не выстроятся в горизонтальную линию, т.к. «якоря» (<a>) находятся внутри блочных контейнеров <li>. А блочные контейнеры всегда выводятся браузером так, как если бы за ними следовал перенос строки (невидимый <br>). При этом, высота «ступеньки» может варьироваться в соответствии с текущим значением line-height.

Решение элементарно:

ul#menu li {
    display: inline; /* Средство от "лестницы" */
}

Теперь элементы списка будут выводиться браузером линейно, и меню приобретет подобающий вид:

Гигиена CSS-кодинга

Этот пост основан на статье разработчика Yahoo Store Иствана Сайпосса «How to create clean and efficient CSS» и содержит некоторые общие правила написания качественного CSS кода. Текст не является прямым переводом, а скорее изложением содержания оригинала, дополненным моими комментариями. Читать далее →