26

次のテスト ページと css があります。表示されると、各リスト項目の間に 4px のギャップがあります。アイテムを隣り合わせにするにはどうすればよいですか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

CSS:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}
4

4 に答える 4

45

スペースを削除するには、display:blockとを使用する必要があります。それらがインラインの場合、ブラウザはそれらを単語として扱うため、間にスペースを残します。float:leftli

私の同様の質問も参照してください。

于 2010-06-15T08:48:14.503 に答える
17

@Skilldrick と @teedyay を組み合わせると、答えと説明が得られます。
s が単語として扱われる場合<li>、それらの周囲の空白は 1 つのスペースに凝縮されます。

したがって、これはバグのように見える機能だと思います。

スペースを削除するには、すべて<li>の を間に空白を入れずにチェーンに入れます。
または
のフォント サイズを 0 に縮小し、の<ul>サイズを元に戻します<li>

于 2010-06-15T11:01:17.970 に答える
12

font-size:0タグにも設定できます<ul>。

于 2011-11-08T08:56:11.450 に答える
6

これも汚れているのではないかと思いますが、これが完全に修正されたら（うれしいことに）驚かれることでしょう。

すべての<li>s を 1 行に入れます。

<li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

ごめん。

于 2010-06-15T09:07:52.797 に答える