CSS水平リスト項目間の空白を取り除くにはどうすればよいですか? [複製
-
27-09-2019 - |
質問
この質問にはすでに答えがあります:
次のテストページと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;
}
解決
使用する必要があります display:block
と float:left
に li
sスペースを削除する。それらがインラインである場合、ブラウザはそれらを単語として扱うため、その間にスペースを残します。
また、参照してください 私の同様の質問.
他のヒント
@skilldrickと@teedyayを組み合わせると、答えと説明があります。
もしも <li>
Sは、周囲のどの空白よりも単語として扱われます。
だから、これはバグのように見える機能だと思います。
スペースを削除するには、すべてを置きます <li>
Sは、それらの間に空白がないチェーンにあります。
また
のフォントサイズを減らします <ul>
0にして、のサイズを復元します <li>
s
設定することもできます font-size:0
のために <ul>
鬼ごっこ。
これも汚れているのではないかと思いますが、これにきれいな修正があれば(楽しい)驚かされます。
あなたのすべてを置いてください <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>
ごめん。
所属していません StackOverflow