XHTML Linebreak problema di spazio

Question

Fondamentalmente ho una lista ul

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

Ora gli stili per la lista è:

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

Ok ora, il divario tra ciascuna lista deve essere esattamente 8px ma quando ho vista in un browser ... il suo mroe poi 8px. La sua causa della nuova linea.

Se avessi tutti i tag li su una linea, sarebbe bene, ma io non molta voglia di farlo. C'è un modo per mantenere il mio html così com'è e basta modificare il CSS in modo da questo spazio non sta più lì?

Answer 1

Bene, dal momento che si impostano le voci vengano inline-block lo spazio bianco tra questi elementi nel markup (vale a dire l'indentazione) è ciò che sta causando problemi qui. Due voci di elenco sono quindi separati da uno spazio bianco e il margine sulla sinistra di ogni voce dell'elenco.

. Soluzione: Provare a stare a galla le voci di elenco o di sbarazzarsi degli spazi tra i tag list

In bocca al lupo.

Answer 2

Got it

C'è uno spazio tra ogni tag li - ho rimosso:

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

risposta originale ::

È anche avere un margine superiore di 5px quindi lo spazio sarà 13, è necessario rimuovere il margine di 5px superiore.

er. sei sicuro che questo è il css esatto -. come scritto si dispone di un margine superiore di 5px e un margine sinistro di 8. Non vedo alcun margine inferiore a tutti

http://jsfiddle.net/j5yDd/