0

我有一个 CSS 水平导航栏，我使用左边框和右边框来创建每个菜单项之间的双色调分隔线。但是，由于某种原因，边界之间有一个空间，我不知道如何摆脱它。

这是：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>

任何帮助表示赞赏！

4

2 回答 2

2

出现空格是因为您将每个空格设置li为 display 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>

http://jsfiddle.net/ebZhW/2/

或者，您可以float让列表项出现在同一行，而无需强制将它们视为内联元素：

http://jsfiddle.net/ebZhW/3/

于 2013-02-24T17:52:15.023 回答
0

由于您使用元素的方式，正在渲染元素之间的空白display:。有几种解决方案，包括从 DOM 中删除空白。您还可以添加以下规则：

.menu {
    font-size: 0;
}
.menu li {
    font-size: /* whatever this is supposed to be */;
}

...这将防止任何空白出现在<ul>

http://jsfiddle.net/ExplosionPIlls/ebZhW/4/

您可以改为添加float: left到li元素中。这将使它们相对于空白浮动，因此不会出现。它还使边框垂直延伸整个方式，这可能更可取。

http://jsfiddle.net/ExplosionPIlls/ebZhW/5/

于 2013-02-24T17:57:22.793 回答