1

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

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

提前谢谢，问候，梅林！

4

2 回答 2

4

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

<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 上再次设置来修复它。

于 2013-03-02T16:00:45.140 回答
1

<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...这里是删除空格的相同小提琴

于 2013-03-02T16:00:07.600 回答