Uso: dopo il selettore CSS per riempire uno spazio?

Question

Su this page Desidero che l'intero spazio sulla destra della navigazione sia riempito in bianco.

Così, ho raggiunto 5px ampio blocco di bianco con il: dopo il selettore CSS, e spero ci sia un modo per adattarlo alla larghezza disponibile, anche se io sono aperto ad altri suggerimenti !:

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

Ecco il codice HTML semplificato:

<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> 

E tutto il 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; 
} 

Grazie per aver dedicato del tempo per dare un'occhiata alla mia domanda!

Caroline

Answer 1

si potrebbe aggiungere il selettore ::after pseudo alla li.current-menu-item invece di #menu-main-menu e aggiungere sfondo bianco da quell'elemento in poi.

.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

L'esempio che segue funziona con l'aggiunta di un extra li da riempire, ma dal momento che il carattere renderà dirrentely tra i browser non è possibile prevedere la larghezza. La soluzione alternativa in questo esempio crea un contenitore (#cen) per centrare il contenuto e impostare la larghezza, anche la proprietà overflow è impostata su nascosta. In questo modo è possibile aggiungere uno ul e il riempitivo significativamente più grandi con una larghezza molto maggiore del necessario. Che non causa alcun problema dal momento che parent.parent sta traboccando di overflow.

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

Come liberarsi di float su li consente di definire semplicemente display: block;background: white sul loro genitore ul senza alcuna necessità di :before e :after pseudos per riempire uno spazio. Questo ul sarà già 100% larghezza a causa di display: block.

Per fare questo, è possibile visualizzare ogni elemento come inline-block (display: inline e zoom: 1 per IE6/7) e bastone di chiusura e di apertura </li><li> tag per evitare di inserire spazi tra di loro.

See this fiddle

Bonus nel violino: in un secondo esempio, gli elementi occupare tutto larghezza disponibile (non necessariamente abbastanza, dipende del vostro disegno e il menu) utilizzando table-cell (il valore CSS, non il unsemantico table>tr>td codice HTML, ovviamente). Per IE6/7, stesso fallback come sopra (e stesso rendering).