我正在尝试删除固定顶级菜单ul
左侧的一些空白区域,但我被卡住了,我已经搜索并将其放入:
#nav li {
list-style: none;
display: inline-block;
}
我想将所有列表放在左侧(如left: 0
?),但是在第一个列表项的左侧会产生一些空格。
为什么会发生这种情况,如何将其删除?
以下是代码(fiddle):
#contenedormenu {
background-color: #FFFFFF;
width: 100%;
position: fixed;
top: 0px;
box-shadow: 0px 1px 2px #888;
height: 40px;
z-index: 1;
}
#menu {
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
#nav {
width: 100%;
height: 40px;
top: 0px;
position: fixed;
margin-top: 0px;
}
#nav li {
margin-top: 10px;
list-style: none;
display: inline-block;
}
#nav li a {
color: #5D5D5D;
font-family: Lobster, Arial, sans-serif;
font-size: 16px;
padding: 10px 5px 12px 5px;
text-decoration: none;
text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0;
}
#nav a:hover {
background-color: #f15a24;
color: white;
text-shadow: none;
}
<div id="contenedormenu">
<div id="menu">
<ul id="nav">
<li id="inicio">
<a href="#home" title="Home">Home</a>
</li>
<li id="item1">
<a href="#home">Menu item 2</a>
</li>
<li id="item2">
<a href="#home">Menu Item 3</a>
</li>
</ul>
</div>
</div>
答案 0 :(得分:9)
将代码padding: 0;
编入#nav
答案 1 :(得分:6)
将padding:0;
和margin:0
添加到<ul>
。
答案 2 :(得分:4)
将padding: 0;
添加到<ul>
。
答案 3 :(得分:4)
设置<ul>
标记:
font-size: 0px;
设置<li>
标记:
font-size: 14px; /*or custom*/
其他解决方案:https://davidwalsh.name/remove-whitespace-inline-block