CSS mit Aligned LI innerhalb einer UL

Question

Ich versuche einige LIs innerhalb eines UL rechts, links und mittig auf einer Seite auszurichten. Für das Leben von mir kann ich nicht herausfinden, wie man etwas "zentriert" auf der gleichen Linie hält wie ein links- und rechtsbündiger LI.

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> 

Kann jemand helfen? Übrigens, ich versuche DIVs zu vermeiden.

Danke!

Answer 1

Wenn Sie jeder wollen gleich Platz auf dem Bildschirm teilen, können Sie dies tun:

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

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

Sie wollen Ihre Stile auf ein externes Stylesheet bewegen, though.

Answer 2

Sie können dies definitiv tun, wenn nur eine Sache schwebt.

Wenn Sie sie alle nach links schweben, dann erhalten Sie (mit drei LI-Elementen) ein Recht, Mitte und Links.

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

Ein guter Weg, dieses zu denken, denkt an, was Sie zu jedem einzelnen LI Element passieren soll: Sie jeder rechts von der anderen bewegt werden. Dies ist die gebräuchlichste Methode zur horizontalen Navigation mit einer Listenstruktur.

Answer 3

Ihre li-Elemente sind nur so breit wie der darin enthaltene Text, da Sie sie schweben und keine Breite angeben. Möchtest du, dass dein zentrales Element flüssig ist? Wenn ich nicht falsch bin., Es klingt wie Sie für ein flüssiges dreispaltiges Layout gehen? Es gibt viele Beispiele dafür im Netz, wenn Sie das wollen.

Answer 4

Dank Mitch und allen anderen, das ist die Lösung, die ich mir ausgedacht habe und für mich arbeitet.

<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>