Question

由于某种原因，我的菜单项在菜单项之间保持一定的间距。虽然我确定我没有编程这个......？

任何人都知道我的菜单项之间有3像素间距的原因吗？

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;
}

Thanx提前，问候， Merijn！

Answer 1

您已将display的{{1}}设置为li。因此，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上重新设置它来修复它。

Answer 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

菜单项之间的间距相差奇怪

2 个答案: