CSS-меню с выравниванием по ширине блока

Если вам нужно сверстать меню, в котором расстояние между элементами должно быть одинаковое и при этом родительский блок меню имеет автоматическую ширину, то совсем необязательно использовать для этой цели таблицу. Всё оказывается достаточно просто: можно сверстать семантическое меню через UL-LI или любой другой набор элементов (в примере DIV-SPAN). Ключевыми свойствами CSS будут text-align:justify и display:inline-block. Но только лишь этого недостаточно. Выравнивание по ширине в CSS работает по умолчанию для всех строк, исключая последнюю.

Но что если у нас первая и последняя - одна и таже строка? В этом случае есть решение! Для всех современных браузеров (включая IE8), мы создадим псевдоэлемент через :after который будет иметь ширину 100%, тем самым гарантированно будет являтся последней строкой (той самой для которой правило выравнивания не будет действовать). IE6-7 не понимают псевдоэлементов CSS :after и :before, но у них есть специальное свойство, определяющее поведение последней строки при выравнивании текста. И это свойство text-align-last.

Таким образом, у нас получилось такое меню:

<style type="text/css">
	.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
	.menu span { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
	.menu span:hover { background:black; color:white; }
	.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }
</style>

<div class="menu">
	<span>About</span>
	<span>Company</span>
	<span>Products</span>
	<span>Menu item</span>
</div>

Смотреть пример в действии

05.07.2010 / css, верстка

Понравилась статья?

Подпишись на рассылку через RSS или следуй за нами в Twitter!

Оценка статьи: проголосовало - 0, средняя оценка - 0

Комментарии к статье (11):

[ 02.10.2010 - 16:52 ] - Creo

Отличное решение ) Спс )

[ 01.11.2010 - 19:43 ] - Никита

- Если я в две строки пишу (например через br), то в опере все пункты опускаются. Что с этим делать?

vertical-align:middle; добавить для ".menu span"

[ 14.12.2010 - 13:05 ] - MaZa

а как сделать так, чтобы вместо span использовать li и чтобы это работало в IE7? :)

а хз вообще, очередной глюк ие) если заменяем на ul-li, то он их отображает вообще как display:block, однако если прописать display:inline; zoom:1; получаем display:inline-block, но выравнивание по ширине к сожалению не хочет работать..

[ 17.12.2010 - 16:49 ] - MaZa

короче на jscript реализовал выравнивание по краям (с использованием jquery). <10 строк и вуаля :) концепция следующая: берем ширину внешнего контейнера (в котором пункты меню), отнимаем от неё ширину сумм пунктов меню, делим это на N - 1, где N это количество пунктов. Npx это наш margin-right у каждого пункта, кроме последнего.

чем реализовывать такое на JS, лучше уж таблицей сверстать - меньший изврат будет :)

да и опять же, на сайте должен быть всегда подключен jquery + как на счет того, если юзер изменит размер окна? на onresize биндить событие на перерисовку меню?)) не стоит оно того..

[ 19.12.2010 - 15:46 ] - MaZa

не стоит оно того..
А как же семантика?! Имхо, нормальный ход. Если броузер чего-то не умеет, можно его этому научить. Имхо, лучше, чем всякие хаки в css использовать и прочее, такие костыли наставлять, что через пол года заглянешь - хрен поймёшь что к чему :)

на сайте должен быть всегда подключен jquery
ну и что? что в этом плохого?

как на счет того, если юзер изменит размер окна?
$(document).ready(changeMenu);
$(window).resize(changeMenu);

это излишнее нагромождение JS-кода, он создан не для этого..

если уж говорить о семантике, то я бы тогда вообще забил на IE6-7 и сверстал его через CSS с display:table / display:table-cell, и семантика и всё чики!

[ 20.12.2010 - 12:12 ] - MaZa

ну, вот на этой странице пример для IE8+ , почему тогда не через "display:table / display:table-cell" ? Если не сложно, сделать демку...

это излишнее нагромождение JS-кода, он создан не для этого..
А для чего JS создан?

вот пример, но да, это не justify, просто по центру ячеек как в таблице..

для чего создан JS можно почитать на вике, в последнее время (назовём его временем веб 2.0) JS используется в основном в качестве транспорта для обмена данными (AJAX) и создания всяческих UI-компонентов, ну и конечно по прежнему его главной задачей остается работать с DOM.

в данном случае с меню - это называется писать "костыли для верстки", это просто дурной тон, а использовать это или нет дело каждого :)

[ 21.12.2010 - 16:30 ] - MaZa

но да, это не justify, просто по центру ячеек
- ну, вот, а нужен justify...

JS используется в основном в качестве транспорта для обмена данными (AJAX) и создания всяческих UI-компонентов, ну и конечно по прежнему его главной задачей остается работать с DOM.
- Как раз js , который я написал это и делает.

в данном случае с меню - это называется писать "костыли для верстки"
- почему костыль. отключаешь js и нет justify, включаешь - есть. Костыли, имхо, это когда достаешь левое ухо правой рукой в css, html чтобы реализовать задуманное.

[ 13.01.2011 - 20:16 ] - Gorik

для списка в ИЕ7 помог вот такой код:
ul {width: 99.9%; text-justify: newspaper;}
li {display:inline;}

не знал про newspaper.. спасибо!

[ 29.03.2011 - 13:26 ] - Виталий

как избавится от пропусков между кнопками?
что бы меню состояло полностью из плоскастей(кнопок) сылок

[ 13.09.2011 - 17:09 ] - eno_one

!!!! спасибо!! единственная толковая статья на эту тему!!

[ 08.12.2011 - 11:10 ] - sank

Очень хорошая статья! Спасибо!

Добавить комментарий