Полноправное выравнивание для элементов li

У нас есть адаптивная схема, где некоторые элементы списка отображаются горизонтально:

| Li1 | Li2 | Li 3 | Li4 |

Очевидно, я могу просто установить

 ul {width:100%} ul li {width:25%}

Чтобы resize изменения li, изменив размер браузера. Тем не менее, мы хотим, чтобы левый край левого левого края совпадал с левым краем с правым правым краем правой линии, выравнивающимся с правым краем, даже когда браузер расширяется.

 Li1 Li2 Li3 Li4 | | Li1 Li2 Li3 Li4 | | Li1 Li2 Li3 Li4 | |

Есть ли способ сделать это с чистым css?

Используйте это решение (или это ). Перевод этого ответа в список приводит к:

Разметка:

  Item1
 Item2
 Item3
 Item4

Таблица стилей:

 ul {text-align: justify} ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden} li {display: inline-block}

Это решение IE7 +. Для IE7 вам нужен дополнительный элемент, смежный с элементами списка.

ИМХО, лучший способ – использовать CSS3 Flexboxes:

 .menu { display: flex; justify-content: space-around; }

http://jsfiddle.net/yUgYW/3/

это то, что я получаю так далеко .. может быть для вас началом

HTML

CSS

 #container { } li {float:left; border:1px solid red; width:120px;} .fisrt { float:left; } .last { float:right; } .center { width:400px; margin:auto; }

Привет, вы определяете выравнивание текста в себе, как это

CSS

 ul {width:100%} ul li {width:25%; list-style:none; display:inline-block; text-align:justify; margin:2px; background:yellow; word-wrap: break-word; }

HTML

  Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere 
 Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere 
 DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

Живая демо здесь http://jsfiddle.net/rohitazad/8UakC/8/