completa justificar los elementos li

Question

tenemos un diseño adaptativo, donde se visualizan horizontalmente algunos elementos de la lista:

| Li1 | Li2 | Li 3 | Li4 | 

Obviamente puedo acaba de establecer

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

Para que cambie el tamaño de la li como el navegador cambia de tamaño Sin embargo, queremos que el borde izquierdo de la li más a la izquierda se alinee con el borde derecho derecho que se alinea con el borde derecho incluso cuando el navegador se expande.

Li1 Li2 Li3  Li4 
|      | 

Li1  Li2  Li3  Li4 
|        | 

Li1 Li2 Li3 Li4 
|     | 

¿Hay alguna manera de hacer esto con pure css?

Answer 1

Uso this solution (o this one). La traducción de la respuesta a una lista de resultados en:

de marcado:

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

hoja de estilo:

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

Ésta es una solución IE7 +. Para IE7 necesita un elemento adicional junto a los elementos de la lista.

Answer 2

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

esto es lo que me pasa tan lejos .. podría ser un comienzo para usted

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

Hola definir texto align justifica en que li como como esto

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> 

Demostración en directo aquí http://jsfiddle.net/rohitazad/8UakC/8/

Answer 4

En mi humilde opinión, la mejor manera es utilizar CSS3 Flexboxes:

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