Полноправное выравнивание для элементов 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

 
  • 1
  • 2
  • 3
  • 4
  • 5

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/