固定メニュー幅 - 項目の分布

私は固定メニュー幅 - 項目の分布

<ul> 
<li>item1</li> 
<li>item2</li> 
<li>longitem3</li> 
</ul>

メニューCSS

ul{ 
width:500px; 
} 
li { 
float:left; 
}

リストメニューを持っている彼らは、このようにそれらの間に同じスペースを持っているでしょうので、私は、自動的にメニューに私のアイテムを配布したいと思います

{メニュー} {アイテム} {スペース} {アイテム} {スペース} {アイテム} {メニュー}

にすることが可能ですこれは、HTMLやCSSだけではなく、javascriptで行うのですか？おかげ

出典

2011-10-17 simPod

私はすべての<リーに影響を与えるのではなくCSSクラスを使用します>、このような：CSSに関しては

<li class="menuItem">

：

.menuItem { 
    float: left; 
    margin-right: <some number of px>; 
} 
.menuItem:last-child { 
    margin-right: 0; 
}

「：ラストチャイルド（last-child）セレクタは前の定義をオーバーライドし、最後のメニュー項目のための適切なスペースを削除します。

出典

2011-10-17 22:50:22

ありがとうございました。私が解決しようとしているのは、自分で余白を計算しなければならない場合、あるいは自動的にそれを行うように設定することができる場合です。メニュー項目が追加されたときにマージン/パディングの再計算を避けるために – simPod

javascriptなし私は洗練された解決策を見ていません。あなたが使用することができるハックのカップルがあります。要素数が最大になる場合は、http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/をお試しください。ページが唯一のものになる場合はIEで使用されるCSS式を使用することができます：http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx –

は、あなたがあなたの李さん

li { float:left; margin-right: 5px}

出典

2011-10-17 22:37:34 Kyle

の右側に余白を追加することができるだけで、例えば、各li項目の右側にいくつかのパディングを追加します

li { 
float:left; 
padding-right:20px; 
}

出典

2011-10-17 22:37:47

ul { 
    text-align: center; 
} 

li { 
    display: inline-block; 
}

出典

2011-10-17 22:42:31 benhowdle89

固定メニュー幅 - 項目の分布

答えて

関連する問題