7

このページでは、ナビゲーションの右側のスペース全体を白で塗りつぶしたいと思います。

そこで、：after CSSセレクターを使用して5px幅の白いブロックを実現しました。他の提案も受け付けていますが、使用可能な幅に合わせる方法があることを期待しています。

#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;
}

私の質問をチェックするために時間を割いてくれてありがとう！

キャロライン

4

3 に答える 3

5

代わりに::after疑似セレクターを追加し、その要素以降に白い背景を追加することができます。li.current-menu-item#menu-main-menu

.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 */
}
于 2012-06-12T21:52:52.860 に答える
1

以下の例は、塗りつぶしに余分なものを追加することで機能しliますが、フォントはブラウザ間でひどくレンダリングされるため、幅を予測することはできません。この例の回避策は#cen、コンテンツを中央に配置し、幅を設定するためのコンテナー（）を作成します。また、overflowプロパティは非表示に設定されます。これを行うと、必要以上に幅の広い、非常に大きなdivラッピングulとフィラーを追加できます。liparent.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;       
}
于 2012-06-12T21:33:56.067 に答える
0

floatonを取り除くと、スペースを埋めるために疑似を必要とせずに、親liを簡単に定義できます。のため、これはすでに100％の幅になります。display: block; background: whiteul:before:afteruldisplay: block

これを行うには、各アイテムをinline-block（display: inlineおよびzoom: 1IE6 / 7の場合）として表示し、閉じタグと開き</li><li>タグを固定して、それらの間の空白を回避します。

このフィドルを見る

フィドルのボーナス：2番目の例では、アイテムは（もちろん、非セマンティックHTMLコードではtable-cellなくCSS値）を使用して、使用可能なすべての幅を占めます（必ずしもきれいである必要はなく、デザインとメニューによって異なります）。table>tr>tdIE6 / 7の場合、上記と同じフォールバック（および同じレンダリング）。

于 2012-06-17T07:26:19.450 に答える