Tableless justification или inline-blocks revisited

Спасибо может где то пригодится

правда многовато лешних тегов.
если забить на ие6 то можно уменьшить код

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

На всякий случай:
— text-align-last работает в IE;
— следовательно, блок со 100% шириной можно добавлять через :after (пускай и не во всех браузерах получится обнулить его высоту) — избавление от лишнего блока.

вот это матрешка у вас получилась)) но с ослами видать по другому нельзя…
PS зачем такой иностранный заголовок? — чуть глаз не сломал, когда в англ. речи об «или» споткнулся…

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

Шикарно, достаточно типовая задача, которая приносит много проблем, а решения в интернете пестрят js-кодом.

Хотелось бы посмотреть демо.

Где вы были 3 дня назад? Пришлось заменить LI — меню на TABLE, чтобы оно стало резиновым )))

По поводу предпоследнего варианта, где автор указывает на ошибку в Opera: вы не могли бы пояснить в чем конкретно ошибка, ссылаясь на некий документ с описанием, который нарушила Opera?
Потому как я вижу абсолютно-позиционированный блок (menu-item-icon), который должен позиционироваться относительно своего родителя (menu-item), потому как это первый предок с position=relative|absolute. У этого предка установлен padding. Почему menu-item-icon должен его игнорировать?
Я не исключаю пробела в своих знаниях, потому и спрашиваю :) Сам на w3.org пояснения не нашел.
По адресу www.w3.org/TR/CSS2/box.html#box-padding-area наглядно указана зона «Content» в которую и входит наш menu-item-icon…

спасибо.

А можно ссылку на рабочий пример?

А хотя не надо. Уже сам протестил.
Ну что могу сказать: способ, честно говоря не очень хороший. Очень много оберток элементов + лишний элемент для эмуляции последней строки. Этого всего можно избежать. Во-первых, ie, начиная с 6-ой версии поддерживает свойство text-align-last, а для других браузеров можно использовать свойство content: '' и задавать ему width: 100%. А во-вторых (и это я сам недавно узнал), чтобы ie мог применить свойствой text-align: justify к псевдо-инлайнблочным элементам нужно для него прописать свойство text-justify: newspaper. И тогда всё загадочным образом работает.

В последнем примере должно быть

.menu-item_outerWrap {
    display: inline-block;
}

иначе вся соль пропадает (Но IE6,7 по прежнему не согласны).

Кому интересно, вот мое решение на JS при простом хтмле (ul, li, a)

function nice_menu () {
var total_length = main_menu.width();
var li_width = 0;
for (var i = 0; i < li.length; i++ )
{
li_width = parseInt(li[i].clientWidth) + li_width;
}
var li_margin = (total_length — li_width)/(li.length — 1);
li_not_last.css('margin-right', li_margin+'px');
li_last.css('margin','0');
}

И вешаем эту функцию на domReady и window.onresize

Думаю, не стоит пояснять, что нужно вносить в переменные типа li_last.

Если парсер съест код, то поясню алгоритм:
Считаем ширину всего ul-меню, затем считаем ширину всех li, ищем разницу между ними. Затем эту разницу делим на (кол-во элементов в меню минус один) и присваем это значение в виде правого марджина всем элементам меню, КРОМЕ последнего. ему присваиваем 0.
Достаточно быстро работает даже в 6 ИЕ, багов не выявлено.

Во первых:
menu-item_sizer должен быть inline-block
т.к. ширина не может быть указана для inline элемента

Во вторых:

.menu-item_innerWrap {display: block;}

В ие6-7 будет распирать элемент на всю ширину
так что нужно сделать его либо инлайновым, либо float'ным
(конечно же, только для ие6-7)

В третьих:
Нихрена не понял об
«пробельных символах закрывающей последовательности тегов».
Копипаст же приведённого вами кода — не работает.
Однако, решил проблему путём добавления,
после каждого li, символа неразрывного пробела ( )
(это не валидно, поэтому — пользуемся условными комментариями)
Буду очень признателен, если растолкуете этот момент.

Демка (с малость оптимизированным мною кодом):
ne-vel.ru/demo/inline_blocks_revisited/

ЗЫ:
Спасибо за статью,
думаю, она многим будет полезна.
Но уделять внимание мелочам, в будущем — будет очень даже не лишним…

К счастью есть решение этой проблемы и лежит оно на поверхности — надо сделать этот «инлайн-блок» более инлайновым, для это его нужно обернуть в инлайн элемент
Предпочитаю убирать пробелы совсем (кроссбраузерно) и задавать отступ между «инлайн-блоками» самостоятельно через margin:
для этого родительскому блоку (в данном случае .menu) надо задать font-size:0 и не забыть вернуть размер шрифта для .menu-item a

Да, кстати, у меня не работает последняя версия вашего кода. Ссылку можно на рабочий пример?

Не понимаю почему, но содержимое списка не занимает 100% ширины, никак не могу побороть: jsfiddle.net/Qcr3V/4/

Уперся сейчас в проблему с лишним отступом снизу у обворачивающего блока. Пробежался по примерам из комментов — у всех та же проблема, кроме этого варианта

Долго мучался, ища разницу. В итоге оказалось, что с xhtml доктайпом отступа нету, если же использовать html5 доктайп, то он появляется.

В одном из примеров этот отступ убрали, дописав «margin-bottom:-0.7em». Неудачное решение, так как используется по сути подогнанная цифра.

Сам же ничего, кроме как установить «line-height: 0» для обертки, не нашел. Такое решение совсем не нравится, но ничего лучше не придумалось.