Kullanma: Bir alanı doldurmak için CSS seçiciden sonra?

Question

this page Açıkta, dolaşımın sağındaki boşluğun tamamını beyazla doldurmak istiyorum.

Yani, kullanarak 5px geniş beyaz blok elde: CSS seçicisi sonra ve mıyım diğer önerilere açığım rağmen !:

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

kullanılabilir genişliğine sığdırmak için bir yol yoktur umuduyla

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

Ve tüm ilgili 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; 
} 

Teşekkür İşte basitleştirilmiş HTML'dir sorumu kontrol etmek için zaman ayırdığınız için!

Caroline

Answer 1

yerine #menu-main-menu ait li.current-menu-item için ::after sözde seçici eklemek itibaren bu elementten beyaz arka plan ekleyebilir.

.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

Aşağıdaki örnek doldurmak için fazladan li eklenerek çalışır, ancak yazı tipi tarayıcılar arasında dirrentely hale getirecek beri genişliğini tahmin edemez. Bu örnekteki geçici çözüm, içeriği ortalamak ve genişliği ayarlamak için bir kapsayıcı (#cen) oluşturur, ayrıca overflow özelliği de gizli olarak ayarlanır. Bunu yaptığınızda, ul ve dolgu li'u gerekenden daha fazla genişliğe sahip bir şekilde daha büyük div ekleyebileceksiniz. Ebeveyn.boyutu taşmaları sakladığı için sorun yaratmaz.

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

li üzerinde float kurtulmak sadece bir boşluğu doldurmak için :before ve :after pseudos için ihtiyaç duyulmadan ul ebeveyn üzerinde display: block;background: white tanımlamanızı sağlar. Bu ul zaten display: block nedeniyle% 100 genişlikte olacaktır. Bunu yapmak için

, sen inline-block (IE6/7 için display: inline ve zoom: 1) olarak her öğeyi görüntülemek ve aralarında boşluk önlemek için açılış ve kapanış </li><li> etiketleri sopa olabilir. Turp içinde

See this fiddle

Bonus: İkinci bir örnekte, ürün mevcut tüm genişliğini işgal table-cell (CSS değeri değil kullanarak (ille güzel değil, sizin tasarım ve menü değişir) unsemantic table>tr>td HTML kodu, elbette). IE6/7 için, yukarıdaki gibi aynı geri dönüş (ve aynı oluşturma).