我有一个 CSS 水平导航栏,我使用 border-left 和 border-right 在每个菜单项之间创建双色分隔线。但是,出于某种原因,边界之间有一个空间,我不知道如何摆脱它。
这是:http://jsfiddle.net/ebZhW/1/
这是我的 CSS:
* {
margin:0 ;
padding:0 ;
}
body {
background:#ffffff ;
padding:40px 0 ;
font-family:arial,helvetica,sans-serif ;
color:#131313 ;
}
#topnav {
width:100% ;
height:36px ;
-webkit-border-radius:8px 8px 0 0 ;
-moz-border-radius:8px 8px 0 0 ;
border-radius:8px 8px 0 0 ;
background: #A50000;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#A50000), to(#a10000));
background: -webkit-linear-gradient(#A50000, #a10000);
background: -moz-linear-gradient(#A50000, #a10000);
background: -ms-linear-gradient(#A50000, #a10000);
background: -o-linear-gradient(#A50000, #a10000);
background: linear-gradient(#A50000, #a10000);
-pie-background: linear-gradient(#A50000, #a10000);
behavior: url(/pie/PIE.htc);
position:relative ;
top:87px ;
z-index:50 ;
}
ul.menu {
margin-left:0 ;
padding-left:0 ;
list-style-type:none ;
}
.menu li {
display:inline ;
color:#ffffff ;
border-left:1px solid #5d0000 ;
border-right: 1px solid #d31a1a ;
padding:0 16px ;
margin:0 !important ;
}
.menu li a {
font-size:16px ;
color:#ffffff ;
text-decoration:none ;
line-height:36px ;
}
.menu li:first-child {
border-left:0px !important ;
}
.menu li:last-child {
border-right:0px !important ;
}
和我的菜单代码:
<div id="topnav">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">News / Press</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</div>
感谢任何帮助!
最佳答案
出现空格是因为你将每个li
设置为显示inline
。这会导致标签之间的空白呈现(来自您的回车)。
像这样删除空格:
<div id="topnav">
<ul class="menu">
<li><a href="#">Home</a></li><li><a href="#">Events</a></li><li><a href="#">News / Press</a></li><li><a href="#">Photo Gallery</a></li>
</ul>
</div>
或者,您可以 float
列表项,使它们出现在同一行上,而不强制将它们视为内联元素:
关于css - 如何摆脱 CSS nav 元素边框之间的空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15054594/