Question

我目前正在尝试从整个容器中获取水平导航菜单。

它所处的div延伸得很好，但实际的列表项没有，我不确定为什么。

右侧栏的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/

有什么想法吗？

Answer 1

将rhs div的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;
}

列表（nav）项目不会延伸到右侧浮动的div

2 个答案: