Как распределить элементы по горизонтали с помощью CSS?

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

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

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

Может ли кто-нибудь предложить хорошее решение в CSS?

Ответы

Ответ 1

Вы можете делать то, что используете после inline-block, псевдо-элементов и text-align: justify;, но оно будет работать только в IE8 и выше.

Вот код:

<!-- HTML -->

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>


/* CSS */

ul {
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li {
    display: inline-block;
    margin-right: -.25em;
    position: relative;
    top: 1.25em;
}

Демо-версия: http://jsfiddle.net/joshnh/UX9GU/

Ответ 2

Существует чистое решение:

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

Ответ 3

В качестве дополнения к joshnh ответьте, если у кого-то есть такая же проблема:

Остерегайтесь: text-align: justify; требуется пространство после каждого элемента display: inline-block; для работы. В противном случае элементы рассматриваются как одно слово и не будут распространяться по горизонтали.

Так что это не сработает:

<!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>

Но это будет:

<!-- HTML -->
<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>

У меня была эта проблема, потому что мы уменьшаем нашу HTML-разметку, а minifier помещает все в одну строку.