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

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

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

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

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

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

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

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

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

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

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

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

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

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