：スペースを埋めるためにCSSセレクタの後に？

Question

オンthis pageナビゲーションの右側のスペース全体を白くしたいと思っています。

だから、私が使用して5pxの広い白いブロックを達成：をCSSセレクタの後、私は他の提案を開いていますが、それが可能な幅に合わせ作るための方法があり期待しています！：

#menu-main-menu:after { 
    content:""; 
    display:block; 
    background:#fff; 
    width:5px; 
    height:30px; 
    float:right; 
    } 

ここでは単純化されたHTMLは次のとおりです。

<div class="menu"><ul id="menu-main-menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About us</a></li> 
<li><a href="#">Courses &#038; prices</a></li> 
<li><a href="#">Activities in Rio</a></li> 
<li><a href="#">Accommodation</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">FAQs</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 

そして、すべての関連するCSS：

#primary-menu ul { 
    overflow:hidden; 
} 
#primary-menu li { 
    list-style:none; 
    float:left; 
} 
#primary-menu a { 
    color:#333; 
    background: #fff; 
    display:block; 
} 
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a { 
    color:#fff; 
    background:none; 
} 
#menu-main-menu:before { 
content:""; 
display:block; 
background:#fff; 
width:20px; 
height:30px; 
float:left; 
} 
#menu-main-menu:after { 
content:""; 
display:block; 
background:#fff; 
width:5px; 
height:30px; 
float:right; 
} 

感謝私の質問をチェックする時間を取るために！

キャロライン

Answer 1

あなたはli.current-menu-item代わりの#menu-main-menuに::after擬似セレクタを追加し、以降、その素子からの白色の背景を追加することができます。 liにfloat退治

.current-menu-item:after { 
    background: none repeat scroll 0 0 #fff; 
    content: ""; 
    height: 30px; 
    position: absolute; 
    right: -1000px; /* these numbers are the same */ 
    top: 0; 
    width: 1000px; /* and need to be at least the width of the menu */ 
} 

#primary-menu li { 
    position: relative; /* position the ::after element relative to the li */ 
} 

#primary-menu ul { 
    .... 
    overflow: hidden; /* you already have this to clear your floats */ 
    ....    /* but I thought I should emphasise that you need it */ 
} 

Answer 2

次の例では、埋めるために余分なliを追加することによって動作しますが、フォントは、ブラウザ間でdirrentelyレンダリングされますので、あなたは幅を予測することはできません。この例の回避策では、コンテンツのセンタリングと幅の設定のためのコンテナ（#cen）が作成され、overflowプロパティもhiddenに設定されています。これを実行すると、とフィラーliが必要以上に幅が広くなり、かなり大きな数値のdivを追加することができます。 parent.parentが隠蔽されているので問題はありません。

http://jsfiddle.net/efortis/3YpDh/1/

<div id="cen"> 
    <div class="menu"> 
    <ul id="menu-main-menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About us</a></li> 
     <li><a href="#">Courses &#038; prices</a></li> 
     <li><a href="#">Activities in Rio</a></li> 
     <li><a href="#">Accommodation</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">FAQs</a></li> 
     <li><a href="#">Contact</a></li> 
     <li class="filler">&nbsp;</li> 
    </ul> 
    </div> 
</div> 


#cen { 
    width: 960px; 
    margin: 0 auto;  
    overflow: hidden; 
} 
.menu { 
    width: 1200px; 
    float:left; 
} 

li { 
    padding: 10px 25px; 
    float:left; 
    background: white; 
} 

.filler { 
    width: 200px;  
} 

Answer 3

は、あなたは、単にスペースを埋めるために:beforeと:after pseudosを必要とせずに自分のul親にdisplay: block;background: whiteを定義することができます。このulはすでにdisplay: blockのため100％の幅になります。これを行うには

、あなたはinline-block（display: inlineとIE6/7用zoom: 1）として各項目を表示し、それらの間の空白を避けるために、開閉</li><li>タグを固執することができます。フィドルで

See this fiddle

ボーナス：第二の例では、項目は、すべての利用可能な幅を占有し、table-cell（CSS値をいない使用して（必ずしもきれいではありません、あなたのデザインとメニューに依存）非対称table>tr>td HTMLコード、もちろん）。 IE6/7では、上記と同じフォールバック（および同じレンダリング）。