菜单项在彼此之间具有奇怪的几个像素间距

For some reason my menu items keep having some spacing left and right between the menu items..! While I'm kind of sure I havent programmed this..?

出于某种原因,我的菜单项在菜单项之间保持一定的间距..!虽然我确定我没有编程这个..?

Anyone know why there is like 3 pixels spacing between my menu items?

任何人都知道为什么我的菜单项之间有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;
}

Thanx in advance, Greetings, Merijn!

提前谢谢,问候,Merijn!

2 个解决方案

#1

You've set the display of lis to inline. So, the spaces between your li tags (the line-breaks and indentions) behave like spaces between words. Just remove the spaces and make it like this:

您已将lis的显示设置为内联。因此,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>

You can also fix it with setting font size of ul to zero and setting it again on lis.

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

#2

Try removing all the white space from between the <ul> and <li> items.

尝试从

项之间删除所有空格。

Either have them in a single line, or split over the lines like this...

要么将它们放在一行中,要么像这样分开......

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

Update

Based on your JSFiddle... here is the same fiddle with the white space removed

基于你的JSFiddle ......这里删除了空白区域

#1