列表（導航）的項目不會伸展div右側浮動

Question

我目前正試圖從整個容器中獲取水平導航菜單。

它在延伸罰款，但實際列表項不，我不確定爲什麼。

換右手欄中的CSS，使容器保持導航欄和導航項目是：

#rhs{ 
position: relative; 
float: right; 

height: 720px; 
width: 200px; 

background-color: #3D0099; 
border-left:2px solid #616161; 
} 

nav{ 
display: block; 
position: relative; 

width: 1010px; 
height: 50px; 

margin-left: 7px; 

background-color: #F0F0F0; 

border-top: 1px solid #616161; 
border-bottom: 1px solid #616161; 

z-index: 99999; 
} 

nav li{ 
list-style: none; 
display: inline; 

margin-left: 10px; 

z-index: 99999; 
} 

完整的jsfiddle：http://jsfiddle.net/zDzLs/

任何想法？ RHS的div

Answer 1

更改CSS來：

#rhs{ 

position: absolute; 
right:0px; 
height: 720px; 
width: 200px; 
background-color: #3D0099; 
border-left:2px solid #616161; 
} 

Answer 2

你的代碼是讓我的強迫症發瘋。

我在這裏修改了一下。希望你喜歡。

http://jsfiddle.net/zDzLs/3/

<header> 

     <a href="#"><img class="logo" src="images/header.png"/></a> 

     <nav> 
      <ul> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">What is Counselling?</a></li> 
      <li><a href="#">Personal Counselling</a></li> 
      <li><a href="#">Relationship Counselling</a></li> 
      <li><a href="#">Supervision of Counsellors</a></li> 
      <li><a href="#">Life Coaching</a></li> 
      <li><a href="#">Contact Me</a></li> 
      </ul> 
     </nav> 

    </header> 

    <div class="container"> 

     <div class="content-left"><div class="inner">LEFT</div></div> 
     <div class="content-right"><div class="inner">RIGHT</div></div> 

    </div> 


* { 
    padding: 0; 
    margin: 0; 
} 

body{ 
    background-color: #F0F0F0; 
    font: 14px Century Gothic; 
} 

header { 
    width: 960px; 
    margin: 30px auto; 
} 

header .logo { 
    width: 300px; 
} 

nav { 
    background: #F0F0F0; 
    margin-top: 30px; 
    overflow: hidden; 
} 

nav ul li { 
    list-style-type: none; 
    float: left; 
    margin-right: 2px; 
    font-size: 12px; 
} 

nav ul li a { 
    display: inline-block; 
    text-decoration: none; 
    padding: 10px; 
    background: #333; 
    color: #fff; 
    text-align: center; 
} 
nav ul li a:hover, 
nav ul li.active a { 
    background: #666; 
} 


.container { 
    margin: 30px auto 0; 
    width: 960px; /* 958px */ 
    border:2px solid #616161; 
    overflow: hidden; 
    background: #fff; 
} 

.content-left { 
    float: left; 
    width:628px; 
    margin-right: 30px; 
} 

.content-right { 
    float:left; 
    width: 300px; 
    background: #f9f9f9 
} 

.inner { 
    padding: 20px; 
}