CSS-меню с выравниванием по ширине блока - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

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> 
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 2636 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]