헤더 내에 메뉴를 가운데 놓으려고합니까?

Question

Here's a jsFiddle.

내 목표는 헤더의 너비가 95 % 인 메뉴를 갖는 것입니다.

왜 #header 또는 #menu의 배경색이 나타나지 않습니까?

배경색이 나타나도록 관리하면 머리글의 가운데에 맞춰지지 않습니다.

여기 내 코드입니다 :

HTML :

<header id="header">  
     <nav id="menu"> 
     <ul id="nav"> 
      <li><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
     </nav> 
</header> 

CSS : 그들은 더 높이가 없기 때문에

#header { 
    background: black; 
} 
#menu { 
    background: #bf4040; 
    position: relative; 
    width: 95%; 
    margin: 0 auto; 
} 
ul#nav { 
    margin: 0; 
    padding: 0 20px; 
    width: auto; 
} 
    ul#nav li { 
     float: left; 
     padding: 0; 
     list-style: none; 
     list-style-image: none; 
     margin: 2px 2px; 
    } 
    ul#nav li a { 
     font-size: 12px; 
     font-weight: bold; 
     text-decoration: none; 
     line-height: 37px; 
     display: block; 
     text-align: left; 
     padding: 0px 15px; 
     white-space: nowrap; 
     text-transform: uppercase; 
     color: #000; 
     border-radius: 10px; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
    } 
ul#nav li.current a, ul#nav li a:hover { 
     color: #ffe200; 
     background: #3d5a81; 
    } 

Answer 1

그것은이다! 이것은 사용중인 float: 모두로 인한 것입니다. 그걸 display:inline-block으로 바꾸어보십시오. 해결책에 가깝습니다.

http://jsfiddle.net/px4Qy/2/ 

내비게이션을 배치하기 위해 text-align:right;을 추가했습니다. 메뉴를 가운데로 맞추려면이 값을 text-align:center;으로 변경하십시오. 그것은 탐색 항목이 떠 있기 때문에 더 계산 된 높이가 없기 때문에

Answer 2

#menu 요소는 그 위에 고정 된 높이를 설정하거나 내가 실현 후이 댓글을 추가 overflow: hidden

#menu { 
    background: #bf4040; 
    position: relative; 
    width: 95%; 
    margin: 0 auto; 
    overflow:hidden /* clears the floating elements giving the container height */ 
}