Как растянуть боковые отступы li в меню?

Question

[Andr Lw1]

Имеется ul с фиксированной шириной, и пункты меню (li)
нужно чтобы пункты меню растягивались по ширине ul.

Для примера:

| item | item | item | item |
| item | item |item| item | item |

Comments

[Юрий Лобанов]

Автор, где реакция на ответы?

Answer 1

[Илья Лесных]

Имитировать поведение таблицы через значения table/table-cell свойства display.

Answer 2

[Max P.]

text-align: justify же

jsfiddle.net/s7zpH

Answer 3

[Myateznik]

Попробуйте свойство CSS3 flex.

ul{display:flex;}
li{display:block;flex:1;}

Пример 1 (с учётом margin у элементов li) · Пример 2 (Без учёта margin)
Одна проблема нужно учитывать совместимость с браузерами

Answer 4

[ModestesGonze]

Так?
Для равномерного распределения пунктов меню, задаешь для родителя (ul) display: table; а для потомков (li) display: table-cell;

Answer 5

[ixon]

Вот, если я правильно понял.

ul{text-align: justify;}
ul li{display:block;float:left}

Comments

[Юрий Лобанов]

На блочные элементы правило text-align не распространяется. См. ответ @zenwalker

[ixon]

@iiil ошибся, не проверив.

Answer 6

[Владлен Грачев]

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

Answer 7

[Sergey Nikolaev]

Может что-то не понял, но если количество li фиксировано, разве width: *% не поможет?
jsfiddle.net/mccrush/s7zpH/4

А если количество li будет меняться, высчитывать*% через js.
Велосипед, но едет :)

Comments

[Юрий Лобанов]

Зачем делать на js то, что можно сделать на чистом css?

Answer 8

[telegraphnij_stolb]

Оба ответа не полные.

1) display: table-cell

свойства задать нужно ячейкам(для ul не нужно задавать display: table)

li {
  display: table-cell;
  width: 1%;
}

При этом будет глючить при адаптиве в Safari некоторых версий(подробнее)

2) text-align: justify;

свойство работает только если есть как минимум 2 строки. Значит нужно сымитировать 2-ую строчку при помощи псевдоэлемента. Из-за этого появится ненужный отступ снизу. Убрать можно либо установив для меню высоту, либо line-height: 0; (font-size: 0 очень глючный, его ставить не советую). Потом line-height нужно будет явно задать для li.

Задать высоту - наилучший вариант, т.к. в варианте с line-height, если нужна поддержка Opera 10-11, то в них надо еще и font-size 0.5px задавать. И все равно 1px отступ снизу останется. А с высотой проблем нет.

код:

ul {
  text-align: justify;
  text-justify: distribute-all-lines;  /* IE */
  height: 40px; /* (либо line-height: 0;) */
}

ul: after {
  display: inline-block;
  width: 100%;
  height: 0;
}

li {
  display:  inline-block;
  vertical-align: top;  /* (если задали line-height: 0 для ul, то тут нужно перезадать line-height)*/
}