Если вам нужно сверстать меню, в котором расстояние между элементами должно быть
одинаковое и при этом родительский блок меню имеет автоматическую ширину, то
совсем необязательно использовать для этой цели таблицу. Всё оказывается
достаточно просто: можно сверстать семантическое меню через 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>
|
