Wie wird man von Leerraum befreit zwischen CSS horizontaler Liste Artikel? [Duplikat]
-
27-09-2019 - |
Frage
Diese Frage bereits eine Antwort hier:
Ich habe die folgende Testseite und CSS bekommt. Wenn angezeigt wird, gibt es eine 4px Lücke zwischen den einzelnen Listenelement. Wie erhalte ich die Elemente nebeneinander sein?
<!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>
Die 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;
}
Lösung
Sie müssen display:block
und float:left
auf dem li
s verwenden, um den Raum zu entfernen. Wenn sie sind inline die Browser behandelt sie als Worte, und so Blätter Raum dazwischen.
Andere Tipps
Kombinieren @Skilldrick und @teedyay und Sie haben Ihre Antwort und Erklärung.
Wenn <li>
s wie Wörter behandelt werden als alle weißen Raum um sie herum zu einem Raum kondensiert.
Also ich denke, das ist ein Merkmal, das aussieht wie ein Fehler.
, um den Raum entfernen entweder alle Ihre <li>
s in einer Kette setzen ohne Leerzeichen zwischen ihnen.
OR
Reduzieren Sie die Schriftgröße auf der <ul>
auf 0 und Wiederherstellen der Größe auf den <li>
s
Sie können auch font-size:0
für den <ul>
Tag gesetzt.
Ich fürchte, dieses schmutzigen Auch das ist, aber ich werde (angenehm) überrascht sein, wenn es eine saubere Lösung, um diese.
Legen Sie alle Ihre <li>
s in einer Zeile:
<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>
Es tut uns Leid.