[英]How to make my navigation bar fill up entire width of my div
I have created a layout which contains 1 div with a fixed width width: 900px;
我创建了一个布局,其中包含1 div, width: 900px;
固定为width: 900px;
. 。 and I have centered this div so in that I have 2 blank spaces on either side. 我将这个div居中,因此我在每一侧都有2个空白。 What I want to do is add a navigation bar inside this div at the top and have its width fill up the width of the div. 我想要做的是在此div顶部的顶部添加一个导航栏,使其宽度填充div的宽度。 Here's my navigation html and css code; 这是我的导航HTML和CSS代码;
<div id="content">
<nav>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Media</a></li>
</ul>
</nav>
</div>
The CSS for Navigation; 导航CSS;
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:20px;
background-color: #AEAEAE;
width: 15%;
text-decoration: none;
text-transform: uppercase;
}
.nav a:hover {
background-color: #fff;
}
The Div CSS; Div CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 1200px;
}
All help would be greatly appreciated. 所有帮助将不胜感激。 I hope I've explained my problem well enough, I would post images but I have not got enough reputation. 我希望我已经很好地解释了我的问题,我会发布图片,但是我没有足够的声誉。 Thank you. 谢谢。
.nav li{
float: left;
width: 20%;
}
And remove width: 15%
from .nav a
并删除width: 15%
.nav a
width: 15%
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.