nicht angemeldet
Listenelemente mit "display: inline-block" in einer Zeile
Hallo zusammen,
ich bin gerade dabei in einem Template eine Navigation aus Listenelementen zu bearbeiten. Diese Listenelemente sollen alle in einer Zeile direkt hintereinander angezeigt werden. Für sowas nutze ich persönlich eigentlich immer "display: inline-block".
Als Beispiel folgendes Snippet:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
ul { list-style: none; margin: 0; padding: 0; }
ul li { display: inline-block; border: 1px solid black; }
</style>
</head>
<body>
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ul>
</body>
</html>
Wie gewünscht werden die Listenelemente nun alle schön hintereinander angezeigt. Problem ist jedoch, dass zwischen den einzelnen Listenelementen ein kleiner Zwischenraum ist, den ich auch mit "margin: 0;" nicht wegbekomme.
Wenn ich statt der Methode mit "display: inline-block;" einfach "float: left;" benutze, ist der Zwischenraum zwar weg, aber ich bin eigentlich kein Fan von float weil floatende Elemente irgendwie immer alles ein bisschen komplizierter machen.
Ich bin mir eigentlich sicher, es auch mit "display: inline-block;" schonmal geschafft zu haben, die Listenelemente direkt hintereinander anzuzeigen und glaube daher gerade bloß ein bisschen auf dem Schlauch zu stehen.
Ich hoffe mir kann da jemand wieder auf die Sprünge helfen :D
-
Hi,
Wie gewünscht werden die Listenelemente nun alle schön hintereinander angezeigt. Problem ist jedoch, dass zwischen den einzelnen Listenelementen ein kleiner Zwischenraum ist, den ich auch mit "margin: 0;" nicht wegbekomme.
Natürlich, schließlich befindet sich Whitespace zwischen den Elementen, und der wird im Normalfall in HTML zu einem Space-Character bei der Anzeige.
Ich bin mir eigentlich sicher, es auch mit "display: inline-block;" schonmal geschafft zu haben, die Listenelemente direkt hintereinander anzuzeigen und glaube daher gerade bloß ein bisschen auf dem Schlauch zu stehen.
Wenn du keinen Whitespace willst, notiere die Elemente im Dokument ohne solchen zwischen ihnen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?