菜单项之间有几个奇怪的像素间距答案

【问题标题】：Menu items have a wierd few pixels spacing between eachother菜单项之间有几个奇怪的像素间距
【发布时间】：2013-02-17 01:18:25
【问题描述】：

由于某种原因，我的菜单项在菜单项之间一直有一些左右间距..！虽然我有点确定我没有编程过这个..？

有人知道为什么我的菜单项之间有 3 个像素的间距吗？

http://jsfiddle.net/skunheal/ceFSJ/

HTML：

<div id="menu">
   <ul id="nav">
      <li class="page_item page-item-13">
            <a href="http://www.overdelijn.nl/wp/?page_id=13">Contact</a>
        </li>
      <li class="page_item page-item-5 current_page_item">
            <a href="http://www.overdelijn.nl/wp/">Home</a>
        </li>
      <li class="page_item page-item-7">
            <a href="http://www.overdelijn.nl/wp/?page_id=7">Nieuws</a>
        </li>
   </ul>
</div>

CSS：

#nav, #subNav {
   list-style: none;
   padding-left: 0px;
   margin: 0px;
}

#nav li, #subNav li {
   display: inline;
    padding:0px;
}

/* Currently selected page nav item (and parent) if applicable */
.current_page_item a,
.current_page_parent a {
    text-decoration: none;
    font-family:futura;;
    color:#CCC;
}

.page_item a{
    text-decoration: none;
    font-family:futura;;
    color:#FFFFFF;
    display:inline-block;
    background:#00C;
    line-height:30px;
    width:120px;
    height:30px;
}   

#menu{
    height:30px;
    text-align:center;
}

提前谢谢，你好，梅林！

【问题讨论】：

没有正确关闭您的<div> 标签？
你能复制到jsfiddle.net吗？（只是一个想法，但请尝试删除 <ul> 和 <li> 项目之间的空白...将它们全部放在一行中。
这行创建了我的菜单！它的wordpress。看起来不错..？
jsfiddle.net/skunheal/ceFSJ 这里是 jsfiddle！
@PerfectDark Thanx 它确实有效。但要做到这一点，我需要修改 wordpress 功能。我不想这样做，因为我的客户将来可能想使用另一个模板。 ul 解决方案的 0px 字体有效。可能会使用它，因为它是基于模板的。无论如何谢谢！

标签： html css wordpress menu

【解决方案1】：

您已将lis 的display 设置为inline。因此，li 标记之间的空格（换行符和缩进）就像单词之间的空格。只需删除空格并使其如下所示：

<div id="menu">
 <ul id="nav">
   <li class="page_item page-item-13"><a href="http://www.overdelijn.nl/wp/?page_id=13">Contact</a></li><li class="page_item page-item-5 current_page_item"><a href="http://www.overdelijn.nl/wp/">Home</a></li><li class="page_item page-item-7"><a href="http://www.overdelijn.nl/wp/?page_id=7">Nieuws</a></li>
 </ul>
</div>

您也可以通过将ul 的字体大小设置为零并在lis 上再次设置来修复它。

【讨论】：

谢谢！我将使用字体选项，因为我不想编辑 wordpress 功能！
如果设置字体大小，您可能还需要将行高设置为 0 以完全删除不需要的填充。

【解决方案2】：

尝试删除 <ul> 和 <li> 项目之间的所有空白。

要么将它们放在一行中，要么像这样拆分成多行......

<ul id="nav"><li class="page_item page-item-13"><a href="http://www.overdelijn.nl/wp/?page_id=13">Contact</a></li
><li class="page_item page-item-5 current_page_item"><a href="http://www.overdelijn.nl/wp/">Home</a></li
><li class="page_item page-item-7"><a href="http://www.overdelijn.nl/wp/?page_id=7">Nieuws</a></li
></ul>

更新

基于您的 JSFiddle...here is the same fiddle with the white space removed

【讨论】：