CSS 水平ナビゲーション バーがあり、border-left と border-right を使用して、各メニュー項目の間に 2 トーンの仕切りを作成しています。しかし、どういうわけか、境界線の間にスペースがあり、それを取り除く方法がわかりません。
ここにあります: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>
どんな助けでも大歓迎です!