Jump to content
  • 0

justify для блоков


gibiskus
 Share

Question

Здравствуйте. Часто для равномерного распределения блоков по ширине использую следующий 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 by gibiskus
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

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

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

Не пойдёт?

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

Link to comment
Share on other sites

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

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

 

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

Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy