Wie wird man Leerraum zwischen css horizontale Liste Elemente loswerden?

Ich habe die folgende Testseite und CSS. Wenn es angezeigt wird, gibt es eine Lücke von 4 px zwischen jedem Listenelement. Wie bekomme ich die Gegenstände nebeneinander?Wie wird man Leerraum zwischen css horizontale Liste Elemente loswerden?

<!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; 
}

Quelle

2010-06-15 Curyous

Sie benötigen display:block und float:left auf den li s verwenden, um den Raum zu entfernen. Wenn sie inline sind, behandelt der Browser sie als Wörter und lässt so dazwischen Platz.

Siehe auch my similar question.

Quelle

2010-06-15 08:48:14 Skilldrick

Ich fürchte, das ist auch dreckig, aber ich werde (angenehm) überrascht sein, wenn es eine saubere Lösung dafür gibt.

alle auf einer Linie Ihre <li> s Put:

<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.

Quelle

2010-06-15 09:07:52 teedyay

Kombinieren @Skilldrick und @teedyay und Sie haben Ihre Antwort und Erklärung.
Wenn <li> s als Wörter behandelt werden, wird kein weißer Raum um sie herum zu einem Leerzeichen zusammengefasst.

Also ich denke, das ist eine Funktion, die wie ein Fehler aussieht.

Um den Platz zu entfernen, setzen Sie entweder alle Ihre <li> s in eine Kette ohne Leerraum zwischen ihnen.
OR
Reduzieren Sie die Schriftgröße auf den <ul>-0 und die Größe auf dem <li>

Quelle

2010-06-15 11:01:17

Reduzierung der Schriftgröße und Wiederherstellung es hat den Trick für mich, danke – kitschmaster

Ich weiß, diese Frage ist ein wenig alt, aber es gibt noch eine Alternative - setzen '' und '-> 'vor jedem'

'. Beachten Sie, dass ich nicht gesagt habe, dass es eine gute Lösung war! Es ist jedoch meine bevorzugte Methode im Vergleich zu den obigen Alternativen geworden. – ClarkeyBoy

float left funktioniert auch, kam aber mit unerwünschten Nebenwirkungen für mich. Die Schriftgröße Null hat es geschafft. Danke – nest

Sie s auch wieder font-size:0 für den <ul> Tag einstellen.

Quelle

2011-11-08 08:56:11 killebytes

Sorry, habe nicht ganz @David Antworten gelesen. – killebytes

war die bessere Lösung für mich – wutzebaer

Was ist mit der Browser-Unterstützung? Ich habe irgendwo gelesen, dass es in IE <= 7 nicht funktioniert –

Wie wird man Leerraum zwischen css horizontale Liste Elemente loswerden?

Antwort

Verwandte Themen