Меню на всю ширину блока.

[Светлана Г.]

Здравствуйте!

Есть задача сверстать такое меню:

 

Сначала подумала сделать имитацией таблицы, но вроде был способ с помощью inline-block,

Посоветуйте, что лучше? Где можно посмотреть примеры решений?

[Great Rash]

Если таблицей уж очень не хочется, то можно заюзать flex. Тем более есть js-fallback для старых ИЕ.

[Switch74]

inline-block или float мне кажется будет лучше чем таблицы, особенно если нужна адаптивная верстка http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

[Great Rash]

Switch74, вы не учли, что активный пункт меню надо подсвечивать.

[klierik]

делать таблицей и не парится.

на сегодняшний день кроме таблицы, согласно поставленной задачи, с реализацие данного элемента, кроссбраузерно, никто не справится.

[Switch74]

хм.. а в чем проблема подсветить?

[Great Rash]

Проблема в том, что в статье на css-live пункты меню не стоят вплотную друг к другу, а, судя по картинке ТС, должны быть прижаты. Если бы подсветки фона не было, то на это можно было бы забить, т.к. не видно.

[Светлана Г.]

Вот сделала пример на таблицах: http://jsfiddle.net/A6RJN/

 

Для старых IE сделаю float.

 

Правда, надо учитывать, что если будет больше пунктов меню, то не поместится в блок и получится переполнение.

Edited March 12, 2014 by Светлана Г.

[klierik]

а использовать <table> религия не позволяет?

[Светлана Г.]

а использовать <table> религия не позволяет?

Ну <table> принято использовать для таблиц. 

[Great Rash]

Ну принято использовать для таблиц.

В HTML5 это не совсем так, см. код ниже:

<table role="presentation">

[klierik]

Ну принято использовать для таблиц. 

не надо вестись на этот бред.

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

 

для достижения максимальной отзывчивости от функциональности от элемента -- не важно какие инструменты для этого использованы.

 

вместо того что бы городить псевдо-таблицу и потом писать хак для ИЕ (что само собой усложняет поддержку кода в будущем) можно быстрее, проще и в итоге понятнее реализовать данную задачу через обычную таблицу. она будет работать везде одинаково, предсказуемо и надежно.