Полная обосновывать для Li элементов

Question

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

| Li1 | Li2 | Li 3 | Li4 | 

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

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

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

Li1 Li2 Li3  Li4 
|      | 

Li1  Li2  Li3  Li4 
|        | 

Li1 Li2 Li3 Li4 
|     | 

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

Answer 1

использования this solution (или this one). Воплощение, что ответ на список результатов в:

Markup:

<ul> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

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

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

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

Answer 2

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

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

HTML

<div id="container"> 
<ul> 
    <li class="fisrt">1</li> 
</ul> 
<ul class="center"> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 
<ul> 
    <li class="last">5</li> 
</ul> 
</div>​ 

CSS

#container 
{ 
} 

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

Answer 3

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

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

<ul> 
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li> 
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li> <li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>  
</ul> 

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

Answer 4

IMHO, лучший способ использования CSS3 Flexboxes:

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