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

前もって感謝します、こんにちは、Merijn!

4

2 に答える 2

4

displayのをに設定しまし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のフォント サイズを 0 に設定し、再度lisに設定して修正することもできます。

于 2013-03-02T16:00:45.140 に答える
1

<ul>と<li>アイテムの間の空白をすべて削除してみてください。

それらを1行にするか、このように行を分割します...

<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 に答える