CSS水平メニューの動的幅スペーサー

Question

私は単純な水平メニューを持っています（下記参照）。いくつかのアイテムは左に浮かれていて、一部は右に浮かんでいます（右側のオプションは管理オプションで、すべてのページに表示されますが、左側のものはコンテキスト固有のものです）各メニューアイテムには盛り上がったボタンとして表示される境界があります。左浮動アイテムと右浮動アイテムの間のスペーサーアイテムのように、上げボタンとしても使用できます。

私の問題は、純粋なCSSの方法では、「ul.menu下のCSSの「li.spacer」セレクタを参照してください）、スペーサーの幅が左右の浮動項目の間のスペースを埋めるようにします。スペーサーの幅は、他の項目の数と幅がコンテキストによって異なります文脈上

私はdynamicaにいくつかのjavascriptを書くことができました私はスペーサーの幅を設定していますが、それはブラウザー固有のものでなければなりません。異なるブラウザーでは境界/マージンを別々に扱うので、そうしたくないので本当に醜いでしょう。

[右ためのフロート、浮いて右のアイテムは逆の順序で列挙されている、彼らが画面に表示されることに注意してください]

<ul class='menu'> 
    <li class='left'><a href='xxx'>Item One</a></li> 
    <li class='left'><a href='xxx'>Item Two</a></li> 
    <li class='left'><a href='xxx'>Item Three</a></li> 
    <li class='left'><a href='xxx'>Item Four</a></li> 
    <li class='right'><a href='xxx'>Item Eight</a></li> 
    <li class='right'><a href='xxx'>Item Seven</a></li> 
    <li class='right'><a href='xxx'>Item Six</a></li> 
    <li class='right'><a href='xxx'>Item Five</a></li> 
    <li class='spacer'><a href='#'>&nbsp;</a></li> 
</ul> 

とここに私のCSS

ul.menu { 
    width: 100% ; 
    list-style: none ; 
    height: 2em ; 
    margin: 0 ; 
    padding: 0 ; 
    } 
ul.menu li.left { 
    float: left ; 
    } 
ul.menu li.right { 
    float: right ; 
    display: inline-block ; 
    } 
ul.menu li { 
    border: 1px solid ; 
    border-color: #fff #000 #000 #fff ; 
    position: relative ; 
    text-align: center ; 
    vertical-align: middle ; 
    } 
ul.menu li a { 
    padding: 0 1em; 
    } 
ul.menu li.spacer { 
    width: ??? ; 
    } 

がここにありますされますフィドル：http://jsfiddle.net/uJCAX/1/

Answer 1

あなたはかなり複雑なアプローチをとっていると思います。 2つの異なるリストを作成すると、はるかに簡単になり、スペーサーは必要ありません。

例：http://jsfiddle.net/elclanrs/Ar3DH/3/

HTML

<nav id="menu"> 
    <ul id="user"> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
     <li><a href="#">Four</a></li> 
    </ul> 

    <ul id="admin"> 
     <li><a href="#">Five</a></li> 
     <li><a href="#">Six</a></li> 
     <li><a href="#">Seven</a></li> 
     <li><a href="#">Eight</a></li> 
    </ul> 
</nav>​ 

CSS：

#menu { 
    position: relative; 
    background: #ddd; 
    height: 40px; 
    font: bold 15px/40px Arial; 
} 
#admin { 
    position: absolute; 
    right: 0; 
} 
li { float: left; } 
a { 
    display: block; 
    padding: 0 .5em; 
    text-decoration: none; 
} 
​ 

Answer 2

これは、効果を達成するためにul上の境界線といくつかの擬似要素を使用。この例のフィドル：http://jsfiddle.net/uJCAX/26/を参照してください。しかし、私は気づいたことがありますが、時々Firefoxがミドルスペースの左側の境界線を誤って表示する（明らかにバグを表示する）。また、右のボタンが次のレベル（狭い画面）に「折り返す」場合、エフェクトは壊れます。

HTML

<ul class='menu'> 
    <li class='left'><a href='xxx'>One</a></li> 
    <li class='left'><a href='xxx'>Two</a></li> 
    <li class='left'><a href='xxx'>Three</a></li> 
    <li class='left last'><a href='xxx'>Four</a></li> 
    <li class='right'><a href='xxx'>Eight</a></li> 
    <li class='right'><a href='xxx'>Seven</a></li> 
    <li class='right'><a href='xxx'> Six</a></li> 
    <li class='right last'><a href='xxx'>Five</a></li> 
</ul> 

CSS

ul.menu { 
    width: 100% ; 
    list-style: none ; 
    margin: 0 ; 
    padding: 0 ; 
    border-bottom: 1px solid #000; 
    border-top: 1px solid #fff; 
    float: left; 
    } 
ul.menu li.left { 
    float: left ; 
    } 
ul.menu li.right { 
    float: right ; 
    display: inline-block ; 
    } 
ul.menu li { 
    border: 1px solid ; 
    border-color: #fff #000 #000 #fff ; 
    position: relative ; 
    text-align: center ; 
    vertical-align: middle; 
    margin: -1px 0; 
    } 
ul.menu li a { 
    padding: 0 1em; 
    } 
ul.menu li.right.last:before { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: -2px; 
    bottom: 0; 
    width: 0; 
    border-left: 1px solid #000; 
    } 
ul.menu li.left.last:after { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    right: -2px; 
    bottom: 0; 
    width: 0px; 
    border-right: 1px solid #fff; 
    }