我正在CSS中创建一个非常简单的菜单。目前我有html代码:
<div id="header">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
和我的css:
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#header{
position:fixed;
height: 20px;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 0 0;
}
#header{
top:0px;
}
这是我的代码的jsfiddle,你可以看到项目低于实际的暗条 - 我怎么能改变它?感谢。
答案 0 :(得分:5)
因为ul
元素具有默认margin
。你可以删除它:
#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#header {
position: fixed;
height: 20px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 0 0;
}
#header {
top: 0px;
}
#navlist {
margin: 0;/*set margin to 0 to ul element*/
}
<div id="header">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
</li>
<li><a href="#">Item two</a>
</li>
<li><a href="#">Item three</a>
</li>
<li><a href="#">Item four</a>
</li>
<li><a href="#">Item five</a>
</li>
</ul>
</div>
<强>参考强>
答案 1 :(得分:0)
由于ul的边缘:
#navlist {
margin: 0;
}
答案 2 :(得分:0)
由于您的ul
代码(#navlist
)默认情况下有margin
,因此请根据浏览器默认样式表进行设置。你的酒吧也有一个固定的高度,这有推动它的效果。
请在此处查看解决方法:http://jsfiddle.net/6mk4kLj8/
我从margin
移除了#navlist
,并从height
移除了#header
,以使其更加灵活。
<强> CSS 强>
#navlist {
margin: 0;
}
#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#header {
position:fixed;
top: 0px;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}