Sử dụng: sau khi chọn bộ chọn CSS để lấp đầy khoảng trống?

Question

Trên this page Tôi muốn có toàn bộ không gian ở bên phải của điều hướng được tô màu trắng.

Vì vậy, tôi đã đạt được 5px khối trắng rộng bằng cách sử dụng: sau khi chọn CSS, và tôi hy vọng có một cách để làm cho nó phù hợp với chiều rộng có sẵn, mặc dù tôi mở để gợi ý khác !:

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

Dưới đây là HTML đơn giản:

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

Và tất cả các CSS liên quan:

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

Cảm ơn vì đã dành thời gian để xem câu hỏi của tôi!

Caroline

Answer 1

Bạn có thể thêm bộ chọn ::after giả đến li.current-menu-item thay vì #menu-main-menu và thêm nền trắng từ yếu tố đó trở đi.

.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

Ví dụ dưới đây hoạt động bằng cách bổ sung thêm một li để lấp đầy, nhưng kể từ khi phông chữ sẽ làm cho dirrentely giữa các trình duyệt bạn không thể dự đoán chiều rộng. Cách giải quyết trong ví dụ này tạo một vùng chứa (#cen) để căn giữa nội dung và thiết lập chiều rộng, còn thuộc tính overflow được đặt thành ẩn. Làm như vậy, bạn có thể thêm div lớn hơn đáng kể gói ul và phụ trang li với chiều rộng lớn hơn nhiều so với yêu cầu. Mà nguyên nhân không có vấn đề kể từ khi parent.parent là hidding tràn.

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

Bắt thoát khỏi float trên li cho phép bạn chỉ cần xác định display: block;background: white trên ul cha mẹ của họ mà không cần phải cho :before và :after pseudos để lấp đầy một khoảng trống. Điều này ul sẽ có chiều rộng 100% vì display: block.

Để làm điều này, bạn có thể hiển thị từng hạng mục như inline-block (display: inline và zoom: 1 cho IE6/7) và dính đóng cửa và mở cửa </li><li> thẻ để tránh khoảng trắng giữa chúng.

See this fiddle

Bonus trong fiddle: trong một ví dụ thứ hai, các mục chiếm tất cả chiều rộng có sẵn (không nhất thiết phải xinh đẹp, phụ thuộc thiết kế và thực đơn của bạn) bằng cách sử dụng table-cell (giá trị CSS, không phải là unsemantic table>tr>td Mã HTML, tất nhiên). Đối với IE6/7, cùng một dự phòng như trên (và cùng một kết xuất).