Comments 87
Спасибо огромное! Сам собирался исследовать этот вопрос и написать статью, но никак не мог выкроить времени, а тут все предельно подробно, замечательно.
не говорите это моему дизайнеру, неделю назад я его уверял, что это невозможно…
Слушайте, у вас в примере 3 ширина блоков задана жестко — где это может вообще пригодиться? По моему, задача обычно бывает другая — равномерно распределить блоки произвольной (определяемой контентом) ширины с равными пробелами между ними.

Хотя, конечно про свойство text-justify почитать интересно. Майкрософт изобрела часть CSS3 еще лет 10 назад.
в примере поставил width: 19% вместо 98px и все гуд работает, а это вообще тру тру тру ))) Спасибо автору )
Буквально вчера решал задачу, аналогичную описанной. Нужно было три баннера расположить по ширине родительского контейнера. Так что вы зря, проблема «рабочая».
Проблема «рабочая» еще и потому что в Photoshop есть такой способ выравнивания объектов, уже не раз присылали на верстку макеты, где элементы были выровнены подобным образом.
Ширина выставлена для наглядности примера. Вы смело можете убрать её, если пожелаете. Так что задача «равномерно распределить блоки произвольной (определяемой контентом) ширины с равными пробелами между ними» — решается :)

Я джва года ждал этого решения. Долой старые костыли! Запасаюсь печеньем…
Спасибо!!! Когда смог решить эту задачу только с применением jQuery.
Супер! Раньше использовал отрицательный сдвиг ul, и рассчитывал отступы так, чтобы последний оказывался прижат к правому краю.
Теперь всё будет проще :)
Спасибо большое, Максим.
Ой, ёй, ёй, сколько разметки лишней. Хорошо, что всё таки удалось более затратные и изящные решения!
Дополнительной разметкой можно не пользоваться, она нужна для правильного абсолютного позиционирования внутри инлайн-блоков. В принципе, целью было сделать абслоютно одинаковую реализацию инлайн-блоков во всех браузерах :) а выравнивание там заодно приплетено.

Способ выравнивания, сам по себе, очень старый — можно даже вообще без лишней разметки (.helper) обойтись, т.к. в IE newspaper и так всё решит, а в нормальных браузерах всё решается с помощью псевдоэлементов
UFO landed and left these words here
В 2-3 раза меньше кода для нормальных браузеров, да и решение с :last-child проще для понимания. А вообще использовать готовую сетку и не думать о таких вещах.
Если бы речь шла о «в 2-3» раза меньше кода 500-а строк, то да, разница была бы на лицо, а в последнем варианте, например, кода ерунда и игра с expression не стоит свеч, мне кажется.

Но, не смотря на это, было бы полезно взглянуть на реализацию такого примера. Сможете сделать?
UFO landed and left these words here
Забавно одну за другой видеть хорошо разобранные темы, о которых сам хотел написать статью…
А про выносные таблицы (и вообще любые блоки) из блока с overflow:hidden; собираетесь написать? :-)
UFO landed and left these words here
Вообще прикольно, я такой блок с display:table растягивал по-другому, но код тут приводить не буду из эстетических соображений :-)

А вот про выносные блоки — это я чуть-чуть про другое говорил, надо будет пример где-нибудь накидать и так же Максу отправить.
Офигеть, я тебе сидел это рассказывал, а ты спустя два года «офигеть» тут пишешь :D
А что делать в том случае, когда на последней строке остается только 2 из 4(например) элемента и они оба оказываются выровнены по левому краю?
Знаете, это решение реализуемо через text-align-last, для которого реализован плагин и соответствующая статья здесь.
Вот хоть убейте, не могу представить, каким образом text-align-last, решает эту задачу?
UFO landed and left these words here
Полезная информация с утра! Буду применять теперь. Постоянно проблемой было.
Вы не только спасли котёнка, но и мои нервные клетки в придачу. В избранное однозначно!
Ну хорошо, «text-align-last: justify;» заставляет IE дать последней строке абзаца (она же и первая) выключку по ширине.

А чем обеспечивается для последнего варианта выравнивание в остальных браузерах? Вот чего я пока ещё не понимаю.
Это происходит за счёт псевдоэлемента (хелпера), который фактически и есть последний строчно-блочный элемент в списке. За счёт его растяжки на 100% по ширине text-align: justify; включается в работу на предпоследней строке, тобишь на первой, где у нас все видимые пункты.

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

Теперь остаётся между каждыми двумя пунктами добавить разделитель и сделать так, чтобы каждый пункт занимал всё пространство между двумя соседними разделителями. ;-)
Не забывайте об условии равного расстояния между текстами пунктов.
UFO landed and left these words here
UFO landed and left these words here
UL-список, текстовая чистота кода (без явного наличия разделителя как текста), разделитель должен иметь произвольный вид (например, быть графическим), ссылка должна прилегать к соседним разделителям вплотную (без каких-либо отступов), высота ссылки и вертикальные отступы вокруг списка должны быть предсказуемо и точно настраиваемыми без приблизительной подгонки какими-либо отрицательными отступами. ;-)
UFO landed and left these words here
UFO landed and left these words here
Спасибо за усилия, Илья, стало заметно лучше. ;-)

К сожалению, есть ряд недостатков, затрудняющих применение решения на практике: у ссылок в зависимости от шрифта могут появляться паразитные вертикальные отступы, причём в разных браузерах разные (в одних — только сверху, в других — также и снизу от ссылок — см. jsfiddle.net/cjGgT/ ), в IE8 некликабельна половинная часть пустого пространства до разделителя слева от текста ссылки, в Chrome 17 для щелчка доступна только часть ссылки, соответствующая высоте текста (области над текстом и под текстом некликабельны); не слишком интуитивно понятная магия с вертикальным padding, нежелательная фиксация высоты списка (вместо её автоматического определения браузером на основании высоты содержимого). (В IE7, кстати, не работает, но для меня это роли не играет.)

Но как proof-of-concept — вполне. ;-)
UFO landed and left these words here
К вопросу об UL-списке: список ссылок (объединённая последовательность однотипных сущностей) не перестаёт быть списком вне зависимости от его функциональной нагрузки (навигация или не навигация). Не флейма ради, а ясности для. ;-)
UFO landed and left these words here
Последовательность навигационных пунктов является относительно самодостаточной лишь до того момента, пока одна из ссылок не перестаёт быть таковой ввиду совпадения её URL-адреса с адресом текущей страницы.

Если у нас не список, получим конструкцию вида «последовательность ссылок + обычный текст + последовательность ссылок», которая для машины может выглядеть уже как цельное предложение. (Бывает навигация и в виде фразы.) В случае же использования списка последовательность названий разделов останется связанной последовательностью однотипных сущностей вне зависимости от того, является ли каждый из пунктов ссылкой.
UFO landed and left these words here
Да, есть такое дело. Жаль, но у меня нет Mac-a. Очень надеюсь, что кто нибудь сможет повозится и понять, в чём причина.
В опере все ломает вот эта строчка ul li {font-size:1px}, но без нее в webkit появляется пробел после последнего li
опечатка! ul {font-size:1px} — все ломает, а вот ul {font-size:2px} делает все более менее ок, пробел уменьшается до 1px (справа) — и в опере все становиться ок, что для нее обычно.
Спасибо за проделанную работу. А вы не могли бы выложить скриншот рабочего варианта в Opera и webkit-ов?
Да, и желательно css.
Opera: cl.ly/EPWJ
Webkit: cl.ly/EPyA
CSS: ul {font-size:2px} :)

надо найти четко работающий вариант, без зазора в 1px справа, пока только удаление переноса строки между последним li и ul решают этот вопрос, но это не спортивно!
UFO landed and left these words here
вопрос небольшой, а чем плох float?(я могу быть не опытным, поэтому если знаете, то был бы очень благодарен ссылке с материалом по данной штуке)
как я понимаю нам блоки нужны одинаковой ширены расположить равномерно?
а если использовать first-child с маленькой css'кой?
нк так с флоатами равномерности не добиться, нужны кастом отступы для первого и последнего элементов и при этом равномерные отступы между промежуточными элементами.
Попробовал последний вариант. Обнаружился недостаток.
Если страница перед отдачей браузеру оптимизируется (удаляются лишние переносы строк и пробелы между тегами), пример не работает. Видимо это логично, поскольку если элементы списка не отделены друг от друга, браузер понимает их как одно единое слово и не пытается распределить их по ширине. Проблема выявилась когда я решил посмотреть на пример через GoogleTranslate.
Оказалось, что GT удаляет в переведенных участках странички избыточные символы (пробелы и переносы строк между тегами) и пример перестает работать.
Если не найдется решения, придется обратно перейти на неидеальный вариант display-inline + last-child.
UFO landed and left these words here
display:inline точно так же зависит от пробелов между тегами

Я неверно выразился, имел ввиду display:inline-block. С тем, что вы написали согласен. Но факт остается фактом, и данный приём мне не подходит, т.к. хочется, чтобы в популярном GoogleTranslate верстка сайта сохранялась + чтобы была возможность сжимать HTML не задумываясь о том, что верстка от этого пострадает.
UFO landed and left these words here
Еще более интересным будет увидеть способ не просто выравнивать по ширине, а саму ширину делить между всеми элементами без таблиц (не поровну, а в зависимости от ширины каждого элемента)
UFO landed and left these words here
да, похоже на то что надо, осталось проверить/адаптировать под все IE
не простая разметка, я смотрю, пробелы, переносы и неразрывные строки, и надо фиксить ie7.
Only those users with full accounts are able to leave comments. Log in, please.