![](/img/trans.png)
[英]How do I make my background-color fill entire width of div when applied to a `ul li`?
[英]How to make my navigation bar fill up entire width of my div
我創建了一個布局,其中包含1 div, width: 900px;
固定為width: 900px;
。 我將這個div居中,因此我在每一側都有2個空白。 我想要做的是在此div頂部的頂部添加一個導航欄,使其寬度填充div的寬度。 這是我的導航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>
導航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;
}
Div CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 1200px;
}
所有幫助將不勝感激。 我希望我已經很好地解釋了我的問題,我會發布圖片,但是我沒有足夠的聲譽。 謝謝。
.nav li{
float: left;
width: 20%;
}
並刪除width: 15%
.nav a
width: 15%
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.