justify для блоков

[gibiskus]

Здравствуйте. Часто для равномерного распределения блоков по ширине использую следующий css код:
 

<ul><li></li><li></li><li></li></ul>

ul {text-align:justify;font-size:0}ul:after {content:'';width:100%;display:inline-block}li {display:inline-block;width:100px;font-size:14px}

В некоторых случаях этот код не работает как нужно, словно text-align:justify нету. Почему так происходит, не могу объяснить, хотелось бы услышать ваши версии.

Edited July 16, 2015 by gibiskus

[raptor-dm]

например тогда когда потомки блочные, а не инлайн-блочные
или задан float

а вообще, я предпочитаю в таких ситуациях использовать выравнивание блоков по принципу bootstrap

[psywalker]

Не пойдёт?

[gibiskus]

  On 7/16/2015 at 10:31 PM, raptor-dm said:

например тогда когда потомки блочные, а не инлайн-блочные или задан float

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

  On 7/16/2015 at 10:35 PM, psywalker said:

Не пойдёт?

там почти идентичный случай, за исключением поддержки более старых браузеров. Да и мой вариант нормально работает https://jsfiddle.net/xmx9jtj9/, но не всегда.

[psywalker]

gibiskus, а почему флексбоксы не юзаете?

[SelenIT]

  On 7/16/2015 at 9:52 PM, gibiskus said:

Почему так происходит

Минификатор кода или еще кто-нибудь убрал пробелы между тегами?

 

Попробуйте вот этот вариант. В новых браузерах (включая Оперу Мини!) будет растягиваться независимо от форматирования кода, в старых IE — тоже, а другого практически и не осталось..

[gibiskus]

  On 7/17/2015 at 12:04 PM, psywalker said:

а почему флексбоксы не юзаете?

ну этот вариант проще, если нужна поддержка от IE ниже 10

  On 7/17/2015 at 3:36 PM, SelenIT said:

Минификатор кода или еще кто-нибудь убрал пробелы между тегами?

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

  On 7/17/2015 at 3:36 PM, SelenIT said:

Попробуйте вот этот вариант.

Я посмотрел статью по Вашей ссылке - там же для IE используется тот же justify, который в моем случае не будет работать.

[SelenIT]

  On 7/17/2015 at 6:15 PM, gibiskus said:

там же для IE используется тот же justify, который в моем случае не будет работать

Посмотрите внимательнее. Там он используется в связке с особой IE-шной магией (частично перешедшей в CSS3), благодаря которой он работает независимо от наличия пробелов