Weird margin in einer Liste

Question

Ich versuche, ein Menü zu stylen, aber ich laufe immer wieder in diesen seltsamen Rand, der in FF4 und IE erscheint.

Dies ist die einzige beeinflussen CSS:

#header ul 
{ 
    display: inline; 
} 
#header ul li 
{ 
    list-style-type: none; 
    background: #000; 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 
#header ul li a 
{ 
    color: #fff; 
    text-decoration: none; 
    display: inline-block; 
    width: 100px; 
    text-align: center; 
} 

Und das ist die HTML:

<div id="header"> 
    <ul id="toplinks"> 
     <li><a href="#">Hello</a></li> 
     <li><a href="#">Herp</a></li> 
     <li><a href="#">Derp</a></li> 
    </ul> 
    </div> 

Wie Sie sehen können, gibt es eine Marge auf beiden Seiten erscheinen, und ich würde mag es so, dass es keinen Rand haben würde (oder vielleicht 1px wäre in Ordnung) ...

Answer 1

ändern, dass kein Mond ist ... ich meine ... Marge.

Was Sie sehen, ist der weiße Zwischenraum zwischen Ihren Elementen. Inline-Block behandelt die Elemente als Inline, außer dass sie Höhen, Breiten, Ränder, Auffüllen, etc. haben. Was passiert, ist der Newline + Abstand, den Sie Ihren HTML-Elementen für nette Einrückung gegeben haben, wird als ein Leerzeichen zwischen den Elementen angezeigt.

Inline-Block ist auch nicht cross-Browser konsistent. Ich würde vorschlagen, display:block; mit Schwimmer zu verwenden.

bearbeiten Vorschlag hinzuzufügen:

Wenn Sie schöne Einzüge wollen, wollen aber extra weiß-Raum (wie in allen XML-Daten überhaupt), verwenden, um zu vermeiden, was ich die „fischigen Notation“ nennen Statt

von:

<div id="header"> 
<ul id="toplinks"> 
    <li><a href="#">Hello</a></li> 
    <li><a href="#">Herp</a></li> 
<li><a href="#">Derp</a></li> 
</ul> 

Verwendung:

<div id="header" 
    ><ul id="toplinks" 
    ><li><a href="#">Hello</a></li 
    ><li><a href="#">Herp</a></li 
    ><li><a href="#">Derp</a></li 
    ></ul 
></div> 

Weiß Raum von Elemente enthalten ist, erhalten, aber Leerraum innerhalb Elemente ist nicht.

Answer 2

Zeit zum Auspeitschen, dass ! Ich schließe das zuerst ein und beginne dann mit der Gestaltung. Es macht es viel einfacher, da die meisten HTML-Browser browserübergreifend identisch aussehen.

Aber um Ihr Problem zu beheben, würde ich überprüfen, ob es irgendwo eine streunende Grenze Eigenschaft gibt. Ich hatte schon mal Schurkenränder und sie haben mich verrückt gemacht. Zu töten, es (bis jetzt), versuchen Sie dies:

border-style: none; 

Wenn wir den kompletten CSS hatten (keine Sorge, wir haben es nicht stehlen), konnte ich Geige tatsächlich mit ihm und gibt Ihnen ein voll funktionsfähige Antwort.

Answer 3

Ihre CSS

#header ul 
{ 
    display: inline; 
} 
#header ul li 
{ 
    float:left; 
    background: #000; 
    margin-left: 1px;; 
    padding: 0; 
} 
#header ul li a 
{ 
    color: #fff; 
    text-decoration: none; 
    display: inline-block; 
    width: 100px; 
    text-align: center; 
}