UL内のLIのアライメントを使用したCSS

Question

ページ内で左揃え、右揃え、中央揃えのUL内にいくつかのLIを配置しようとしています。私の人生にとって、私は何かを左右に整列した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> 

誰でも助けることができますか？ところで、私はDIVを避けようとしています。

ありがとうございます！

Answer 1

あなたはそれぞれが均等に画面スペースを共有したい場合は、あなたがこれを行うことができます：

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

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

あなたはしかし、外部スタイルシートへのあなたのスタイルを移動したいと思います。

Answer 2

あなたは間違いなく1つのものだけを浮かべてこれを行うことができます。

ul li { float:right; } 

これらをすべて左に浮動させると、3つのLI要素で右、中央、左が得られます。

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

これは、各個別のLI要素に起こるしたいもののことを考えていると考えるための良い方法は：あなたは、それぞれ、一方が他方の右に移動することにしたいです。これは、リスト構造で水平ナビゲーションを行う最も一般的な方法です。

Answer 3

あなたのli要素は、それらを浮遊させているために幅を指定していないため、そこに含まれるテキストと同じ幅になります。あなたの中心要素を流体にしたいですか？もし私が間違っていないなら、あなたは流体の3列のレイアウトに行くように思えますか？それがあなたのために起こっている場合は、ネット上でこれらの例がたくさんあります。

Answer 4

ミッチと他の人のおかげで、これは私が思いついた解決策です。

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