Verwenden: nach CSS-Selektor, um ein Leerzeichen zu füllen?

Question

Unter this page möchte ich den gesamten Bereich rechts von der Navigation weiß ausgefüllt haben.

So erreichte ich 5px breiten weißen Block mit dem: nach CSS-Selektor, und ist die Hoffnung, es ist ein Weg, um es die zur Verfügung stehende Breite fit zu machen, auch wenn ich für andere Vorschläge offen bin !:

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

hier ist die vereinfachte 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> 

Und alle relevanten 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; 
} 

Dank für die Zeit, um meine Frage zu überprüfen!

Caroline

Answer 1

Sie könnten weiter die ::after Pseudo-Selektor auf die li.current-menu-item statt #menu-main-menu und fügen weißen Hintergrund von diesem Element hinzufügen.

.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

Das Beispiel arbeitet unten durch eine zusätzliche li Zugabe zu füllen, aber da die Schrift dirrentely unter Browser zeigen werden Sie die Breite nicht vorhersagen können. Die Problemumgehung in diesem Beispiel erstellt einen Container (#cen) zum Zentrieren des Inhalts und Festlegen der Breite, auch die overflow -Eigenschaft wird auf ausgeblendet festgelegt. Dadurch können Sie einen wesentlich größeren div hinzufügen, der die und den Füller li mit viel mehr Breite als erforderlich umhüllt. Das verursacht kein Problem, da das parent.parent Hidding-Überläufe ist.

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

Loswerden von float auf li können Sie einfach ohne dass :before und :after pseudos display: block;background: white auf ihre ul Eltern definieren, um einen Raum zu füllen. Diese ul wird bereits wegen der display: block 100% Breite sein.

Um dies zu tun, können Sie jedes Element angezeigt werden als inline-block (display: inline und zoom: 1 für IE6/7) und kleben Schließen und Öffnen </li><li> Tags Leerzeichen zwischen ihnen zu vermeiden.

See this fiddle

Bonus in der Geige: in einem zweiten Beispiel Elemente besetzen all verfügbare Breite (nicht unbedingt hübsch, hängt von Ihrem Design und Menü) von table-cell (dem CSS-Wert verwendet wird, nicht die unsemantisch table>tr>td HTML-Code, natürlich). Für IE6/7, dasselbe Fallback wie oben (und dasselbe Rendering).