Question

CSS：

body {
    margin: 0;
    padding: 0;
}
#nav {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    min-height:40px;
    background-color:#fafafa;
    border:1px solid #d4d4d4;
}
#nav li {
    display:inline;
}
#nav a {
    display:inline-block;
    padding: 10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:20px;
    color:#333;
    text-decoration:none;
    margin: 0 !important;
}
#nav li.active a, #nav li a:hover {
    color:#555;
    background-color:#e5e5e5;
}

HTML：

<ul id="nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/portfolio/">Portfolio</a></li>
    <li><a href="/archives/">Archives</a></li>
    <li><a href="/resources/">Resources</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

http://jsfiddle.net/hdZNL/

我搜索并发现了这个：CSS - <li> Items in Horizontal Menu have a Gap Between Them它确实消除了间隙，但它将所有内容抛向左边。我希望菜单居中。

Answer 1

您可以在列表项之间添加空注释

<li class="active"><a href="/">Home</a></li><!--
--><li><a href="/about/">About</a></li>

这是sample

Answer 2

如帖子所述 CSS -

Items in Horizontal Menu have a Gap Between Them

显示：内联尊重元素之间的空白，并将它们“内联”。一个快速而肮脏的解决方案是删除li元素之间的空格。

<ul id="nav">
<li class="active"><a href="/">Home</a></li><li><a href="/about/">About</a></li>

等等。

删除CSS菜单中项目之间的间隙

2 个答案: