Full-giustificare per elementi li

Question

Abbiamo un layout adattativo in cui vengono visualizzati in senso orizzontale alcuni elementi della lista:

| Li1 | Li2 | Li 3 | Li4 | 

Ovviamente posso solo impostare

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

Per avere dimensioni cambiamento del Li come il browser cambia dimensione. Tuttavia, vogliamo che il bordo sinistro del limite più a sinistra sia allineato al bordo sinistro con il margine destro destro più allineato al bordo destro, anche se il browser si espande.

Li1 Li2 Li3  Li4 
|      | 

Li1  Li2  Li3  Li4 
|        | 

Li1 Li2 Li3 Li4 
|     | 

C'è un modo per farlo con puro css?

Answer 1

Usa this solution (o this one). Tradurre la risposta a una lista di risultati in:

Markup:

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

foglio di stile:

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

Si tratta di una soluzione di IE7 +. Per IE7 è necessario un elemento aggiuntivo adiacente agli elementi dell'elenco.

Answer 2

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

questo è quello che ho fino a questo punto .. potrebbe essere un inizio per voi

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

Hi di definire il testo align giustifica in voi li come in questo modo

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> 

demo live qui http://jsfiddle.net/rohitazad/8UakC/8/

Answer 4

IMHO, il modo migliore è usare CSS3 Flexboxes:

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