Вы найдете множество руководств по строкам меню в HTML, но для этого конкретного (хотя IMHO общего) случая я не нашел достойного решения:
# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE #
# ^ ^ #
- Существует разное количество пунктов меню, состоящих только из текста, и макет страницы плавный.
- Первый пункт меню должен быть выровнен по левому краю, последний пункт меню должен быть выровнен по правому краю.
- Остальные пункты должны быть оптимально распределены по строке меню.
- Количество разное, поэтому нет возможности заранее рассчитать оптимальную ширину.
Обратите внимание, что ТАБЛИЦА здесь также не будет работать:
- Если вы центрируете все TD, первый и последний элемент не выровнены правильно.
- Если вы выровняете по левому краю и по правому краю первый соотв. последние пункты, интервал будет неоптимальным.
Разве не странно, что нет очевидного способа реализовать это чистым способом с помощью HTML и CSS?
span
вместоhr
! На самом деле это не работает, HR занимает видимое пространство - используйте#menu { border: solid 1px green; }
для подтверждения. Кроме того,display: inline-block;
не работает в IE (... 7? CompatibilityView?) Для элементов, которые не являются встроенными элементами. HR - это блочный элемент, поэтому я предполагаю, что встроенный блок не работает для HR в IE. Во всяком случае, размах.