Der beste Weg, zu verwalten Leerzeichen zwischen Inline-Listenelemente

Question

Meine HTML ist wie folgt:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

Und meine CSS:

#nav {
    display: inline;
}

Doch die Leerzeichen zwischen dem li auftauchen. Ich kann das Leerzeichen entfernen, indem sie wie so kollabiert:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

Aber dies wird weitgehend von Hand gehalten und ich habe mich gefragt, ob es eine sauberere Möglichkeit war, es zu tun.

Answer 1

Mehr Optionen hier, zuerst werde ich Ihnen meine normale Praxis geben, wenn Inline-Listen zu erstellen:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Dann wird die CSS machen Funktion, wie Sie beabsichtigen:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Offensichtlich verließ ich die Schwebe- und aktive Mengen, aber das schafft eine schöne Blockebene Navigation, und ist eine sehr verbreitete Methode für diesen, während immer noch mit Standards halten zu tun. / * Denken Sie daran, Ihre Wünschen zu optimieren, fügen Sie Farbe den Hintergrund, et cetera * /

Wenn Sie mögen, es halten, nur mit Text und nur inline, keine Blockelemente Ich glaube, Sie wollen würden hinzufügen:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Die Realisierung Sie möchten, dass die Leerzeichen entfernen, stellen nur die Ränder / padding entsprechend.

Answer 2

Ein weiterer nützlicher Weg, um die Leerzeichen zu beseitigen ist die Liste der font-size Eigenschaft auf 0 und die eine Liste der Elemente zurück auf die gewünschte Größe.

Answer 3

Was Sie wirklich wollen, ist die CSS3 white-space-collapse: verwerfen . Aber ich bin nicht sicher, ob alle Browser tatsächlich diese Eigenschaft unterstützen.

Ein paar alternative Lösungen ist das hintere Ende eines Tags zu lassen, die Leerzeichen verbrauchen. Zum Beispiel:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

Eine andere Sache, die ich getan gesehen habe, ist HTML-Kommentare zu verwenden Leerzeichen zu verbrauchen

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

thisMat Lösung Sehen Sie, wenn Sie in Ordnung mit Schwimmer sind, und je nach den Anforderungen könnten Sie benötigen einen nachgestellten <li> hinzuzufügen, die festgelegt ist clear: both;.

Aber die CSS3-Eigenschaft ist wahrscheinlich die am besten theoretische Art und Weise.

Answer 4

Die bessere Lösung für Listenelemente zu verwenden:

#nav li{float:left; width:auto;}

hat genau die gleiche optische Wirkung ohne Kopfschmerzen.

Answer 5

Nehmen Sie nicht-XML-basierten HTML und lassen </li>.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Stellen Sie dann die Anzeigeeigenschaften der Elemente Inline-Block statt inline.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Answer 6

Das Problem ist die Schriftgröße in der UL. Setzen Sie ihn auf 0 und es wird verschwinden, aber Sie nicht eigentlichen Text wollen gesetzt, so klein werden, so setzen Sie Ihre LI Schriftgröße zu, was auch immer Sie es wollen.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

Answer 7

Ich hatte das gleiche Problem und keine der oben genannten Lösungen könnte es beheben. Aber ich fand heraus, das funktioniert für mich:

Statt dessen:

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

bauen Sie Ihre HTML-Code wie folgt aus (Leerzeichen vor und nach dem Link-Text):

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

Answer 8

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>