CSS avec Al aligné LI dans un UL

Question

J'essaye d'avoir quelques LI dans un UL aligner gauche, droite, et centre dans une page. Pour la vie de moi, je n'arrive pas à comprendre comment garder quelque chose "centré" sur la même ligne qu'un LI aligné à gauche et à droite.

ul { 
    margin:1em 0; 
    padding:0 
} 

ul li{ 
    display:inline-block; 
    white-space:nowrap; 
    margin:5px 
} 

ul li.left{ 
    float: left; 
    text-align:left; 
} 

ul li.center{ 
    float:left; 
    text-align: center; 
} 

ul li.right{ 
    float: right; 
    text-align:right; 
} 

---

<ul> 
    <li class="left">left</li> 
    <li class="center">center</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
</ul> 

Quelqu'un peut-il aider? BTW, j'ai essayé d'éviter les DIVs.

Merci!

Answer 1

Si vous voulez partager l'espace chaque écran aussi, vous pouvez le faire:

<style> 
    .split { width: 33%; float: left; } 
</style> 

<ul> 
    <li class="split">left</li> 
    <li class="split">center</li> 
    <li class="split">right</li> 
</ul> 

Vous voulez déplacer vos styles à une feuille de style externe, cependant.

Answer 2

Vous pouvez certainement le faire avec seulement une chose flottante. Si vous les faites flotter tous vers la gauche, alors vous obtiendrez (avec trois éléments LI) une droite, un centre et une gauche.

<ul><li>right</li><li>center</li><li>left</li></ul> 

Une bonne façon de penser cela est de penser à ce que vous voulez arriver à chaque élément LI individuel: vous voulez chacun à déplacer vers la droite de l'autre. C'est la méthode la plus courante pour faire une navigation horizontale avec une structure de liste.

Answer 3

Vos éléments li seront seulement aussi larges que le texte qu'il contient puisque vous les faites flotter et que vous ne spécifiez pas la largeur. Voulez-vous que votre élément central soit fluide? Si je ne me trompe pas, on dirait que vous optez pour une disposition fluide à trois colonnes? Il y a beaucoup d'exemples de ces derniers sur le net si c'est ce que vous voulez.

Answer 4

Merci à mitch et à tous les autres, c'est la solution que j'ai trouvée et qui fonctionne pour moi.

<style> 
ul { 
    margin: 1em 0; 
    padding: 0; 
    list-style-type:none; 
} 

li.three { 
    width: 33%; 
} 

li.two { 
    width: 50%; 
} 

li.one { 
    width: 100%;  
} 

li.left { 
    float: left; 
    text-align: left; 
} 

li.center { 
    width: 33%; 
    float: left; 
    text-align: center; 
} 

li.right { 
    width: 33%; 
    float: right; 
    text-align: right; 
} 


</style> 

---

<ul> 
    <li class="three left">left</li> 
    <li class="three center">center</li> 
    <li class="three right">right</li> 
</ul> 


<ul> 
    <li class="two left">left</li> 
    <li class="two right">right</li> 
</ul> 

<ul> 
    <li class="one left">left</li> 
</ul>