XHTML Linebreak problema di spazio
Domanda
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ì?
Soluzione
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.
Altri suggerimenti
Got it
C'è uno spazio tra ogni tag li - ho rimosso:
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