XHTML Linebreak Raumproblem

im Grunde habe ich eine ul ListeXHTML Linebreak Raumproblem

<ul> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
</ul>

jetzt die Stile für die Liste sind:

li { 
    display:inline-block; 
    margin:5px 0 0 8px; 
    width:73px; 
    overflow:hidden; 
} 


li a { 
    display:block; 
    background:url(../images/gtborder.png); 
    width:73px; 
    height:55px; 
} 
li:hover { 
    background-position:0px -55px; 
}

jetzt Ok, die Lücke zwischen jeder Liste sollte genau 8px sein, aber wenn ich Sieh es in einem Browser an ... seine Mroe dann 8px. Es ist wegen der Newline.

Wenn ich alle Li-Tags in einer Zeile hätte, wäre es in Ordnung, aber ich möchte das nicht wirklich tun. Gibt es eine Möglichkeit, wie ich meine HTML behalten kann und nur die CSS bearbeiten, so dass dieser Platz nicht mehr da ist?

Quelle

2010-11-18 Ozzy

Hallo Ozzy, ich verstehe nicht wirklich die Frage. es gibt tatsächlich 8px zwischen jedem li. –

ist es eine Browser-Quirk, im Grunde die Newline zwischen den lis zählen als ein Raum zwischen dem li. also seine infact 8px + die Breite des Raumes, die Schriftart und Schriftgröße berücksichtigt. aber fontsize auf 0 zu setzen, funktioniert nicht, weil einige Browser es als 1px statt 0 lassen – Ozzy

Nun, da Sie die Listenelemente gesetzt inline-block die Leerzeichen zwischen diesen Artikel im Markup (das heißt die Vertiefung) zu sein, ist das, was Probleme hier verursacht. Zwei Listenelemente sind daher durch ein Leerzeichen und den Rand links von jedem Listenelement getrennt.

Lösung: Versuchen Sie, die Listenelemente zu schweben oder den Leerraum zwischen den Listen-Tags loszuwerden.

Viel Glück.

Quelle

2010-11-18 20:44:17 aefxx

Ich fügte hinzu, Schwimmer: links zu den LI-Stilen ... arbeitete wie ein Charme. Danke :) – Ozzy

Beachten Sie jedoch den Double Float Margin Bug des IE6. Siehe hier: http://www.positioniseverything.net/explorer/doubled-margin.html. Kurze Antwort: Verwenden Sie beim Abstand in der gleichen Richtung einen Abstand und nicht einen Rand. – aefxx

ja der alte doppelte ur Margen Bug ¬_¬ Anzeige: Inline zur Rettung: D – Ozzy

Verstanden

Es gibt einen Raum zwischen jedem li-Tag ist - ich habe es entfernt:

http://jsfiddle.net/j5yDd/1/

ursprüngliche Antwort ::

Sie haben auch einen oberen Rand von 5px so die Leerzeichen wird 13 sein, Sie müssen den oberen 5px-Rand entfernen.

er. Sind Sie sicher, dass dies das genaue CSS ist - wie geschrieben, haben Sie einen oberen Rand von 5px und einen linken Rand von 8. Ich sehe überhaupt keinen unteren Rand.

http://jsfiddle.net/j5yDd/

Quelle

2010-11-18 20:31:13

der einzige Rand, den ich mir Sorgen mache, ist der linke Rand lol: P weil der Li Inline-Block ist, also alles in einer Zeile. nur die Abstände zwischen den Li's sind mehr als 8px – Ozzy

Ja, ich sehe jetzt - ich habe es in Geige überprüft und es gibt dort einen wirklich seltsamen zufälligen Platz. –

@Ozzy siehe meine Bearbeitung –

Antwort

Verwandte Themen