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

У меня есть контейнер div на моей веб-странице с фиксированной шириной и содержит элементы формы для входа в систему. Ниже этих элементов есть кнопка отправки, ссылка на забытый пароль и т.д.

Бывает, что последним элементам строки требуется меньше ширины, чем предусмотрено в поле. Как распределить их равномерно? Я не хочу

  • По умолчанию
| A B C           |
  • центрирование линии, например
|      A B C      |
  • и расположение таблицы
|  A  |  B  |  C  |


Вместо этого я ищу способ CSS для достижения:

|  A    B    C  |

То есть:

  • установить равное пространство между всеми элементами
  • центрируйте все, чтобы избежать первого или последнего сбоку.

изменить Этот ответ работал лучше всего. Я создал шаблоны для 2 или 3 элементов вроде этого:

div.spread2evenly > div {
    display: inline-block;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 50%;
    text-align: center;
}

ОТВЕТЫ

Ответ 1

Попробуйте (http://jsfiddle.net/BYEw5/):

<div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

Поскольку вы имеете дело с встроенным блоком, у вас не должно быть пробелов между тегами (уродливое, но оно работает), в противном случае пространство будет видимым.

Изменить 1: Вот еще информация о проблемах с встроенным блоком: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. Вам также может потребоваться добавить display: -moz-inline-box;.

Изменить 2: Кроме того, 33% * 3 не составляет 100%. Если вы действительно хотите 100% и не против какого-то пространства между div, вы могли бы сделать:

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}

.container > div:first-child {
    margin-left: 0;
}

Ответ 2

CSS3 flexboxes теперь поддерживают лучшую поддержку браузера, хотя вам может потребоваться добавить дополнительные префиксы для поставщиков для больше обозревателя.

Современный подход:

Просто измените display элемента контейнера на flex, а затем используйте свойство justify-content, чтобы указать, как браузер должен распространять пространство вокруг и между элементами гибки вдоль главной оси.

В приведенном ниже примере вы заметите, что justify-content: space-around или justify-content: space-between используются для равномерного выделения элементов.

.container {
  display: flex;
}
.container.space-around {
  justify-content: space-around;
}
.container.space-between {  
  justify-content: space-between;
}
<p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<hr />

<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Ответ 3

как насчет text-align:justify;?

Ответ 4

Я не уверен, что ваш точный HTML, но попробуйте это: http://jsfiddle.net/k9FqG/

<div class="test">
    <a href="">A</a>
    <a href="">B</a>
    <a href="">C</a>
    <div class="clear"></div>
</div>

.clear {
   clear:both;   
}

.test {
   width:350px;
   text-align:center;
   border:1px solid #ff0000
}

.test a {
    display:block;
    float:left;
    width:33%;
}

Ответ 5

Это должно помочь вам:

<style type="text/css">

#container {
    width: 210px;
    border: 1px solid blue;
}

#container .part {
    width: 68px; /*(210 / 3 - borders)*/
    float: left;
    text-align: center;
    border: 1px solid yellow;
}

.clear {
    height: 0;
    line-height: 0;
    overflow: hidden;
    font-size: 0;
    clear: left;
}

</style>

И затем HTML:

<div id="container">
    <div class="part">A</div>
    <div class="part">B</div>
    <div class="part">C</div>
    <div class="clear">&nbsp;</div>
</div>

Я только добавил границы, чтобы вы могли видеть, что делает CSS.

Ответ 6

Я хотел выполнить некоторый эффект при наведении курсора и justify-content: space-between было не очень чистым. Это помогло мне.

<div style="display: flex;">
  <div style="flex: 1 1 auto"> A </div>
  <div style="flex: 1 1 auto"> B </div>
  <div style="flex: 1 1 auto"> C </div>
</div>

(Первоначально я получил этот ответ из другого SO-ответа очень давно. Извините, что не упомянул оригинальный кредит, поскольку я не знаю)

Ответ 7

Я знаю, что это древний вопрос, но если кто-то все еще ищет это, теперь есть еще более простой вариант, используя flexboxes: justifiy-content: space-evenly. Название довольно понятно. Вот ссылка

 .container {
  display: flex;
  justify-content: space-evenly;
}