사용 : CSS 선택기를 사용하여 공백을 채우시겠습니까?

Question

켜기 this page 내비게이션 오른쪽의 전체 공간을 흰색으로 채우고 싶습니다.

그래서, 사용 5px 넓은 흰색 블록을 달성 : CSS 선택 후, 그리고 나는 내가 다른 제안에 열려입니다하지만! :

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

이 가능한 너비에 맞게 만들 수있는 방법은,이 희망

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

덕분에 여기에 간단한 HTML이다 내 질문을 확인하는 시간을내어 주셔서 감사합니다!

캐롤라인

Answer 1

대신 #menu-main-menu의 li.current-menu-item에 ::after 의사 선택기를 추가하고 이후 해당 요소에서 흰색 배경을 추가 할 수 있습니다.

.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

아래의 예는 채우기 위해 추가 li를 추가하여 작동하지만 글꼴이 브라우저 중 dirrentely 렌더링하기 때문에 당신은 폭을 예측할 수 없습니다. 이 예제의 해결 방법은 내용을 가운데에 맞춰서 너비를 설정하고 overflow 속성을 hidden으로 설정하는 컨테이너 (#cen)를 만듭니다. 이렇게하면 과 필 요인 li을 필요한 것보다 훨씬 더 많이 포장하여 훨씬 더 큰 div을 추가 할 수 있습니다. parent.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;  
} 

Answer 3

이 li에 float 제거하기 것은 단순히 공간을 채우기 위해 :before 및 :after pseudos에 대한 필요없이 자신의 ul 부모에 display: block;background: white을 정의 할 수 있습니다. 이 ul은 이미 display: block이므로 100 % 너비입니다. 이렇게하려면

, 당신은 inline-block (IE6/7 display: inline 및 zoom: 1)로 각 항목을 표시하고 그 사이에 공백을 방지하기 위해 열고 닫을 </li><li> 태그를 부착 할 수 있습니다. 바이올린의

See this fiddle

보너스 : 두 번째 예에서, 아이템 사용 가능한 모든 폭을 차지 table-cell합니다 (CSS 값이 아닌 사용하여 (반드시 꽤하지, 당신의 디자인 및 메뉴의 따라 다름) 비상식 table>tr>td 물론 HTML 코드). IE6/7의 경우, 위와 동일한 후퇴 (동일한 렌더링).