¿Cómo deshacerse del espacio en blanco entre los elementos de la lista horizontal css?

Tengo la siguiente página de prueba y css. Cuando se muestra, hay un espacio de 4px entre cada elemento de la lista. ¿Cómo consigo que los artículos estén uno al lado del otro?¿Cómo deshacerse del espacio en blanco entre los elementos de la lista horizontal css?

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

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

Fuente

2010-06-15 Curyous

Necesita utilizar display:block y float:left en los li s para eliminar el espacio. Cuando están en línea, el navegador los trata como palabras, y deja espacio entre ellos.

Ver también my similar question.

Fuente

2010-06-15 08:48:14 Skilldrick

Me temo que esto también es sucio, pero me sorprenderá (gratamente) si hay una solución limpia para esto.

poner todo su <li> s en una línea:

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

Lo sentimos.

Fuente

2010-06-15 09:07:52 teedyay

Combine @Skilldrick y @teedyay y tiene su respuesta y explicación.
Si <li> s se tratan como palabras, cualquier espacio en blanco a su alrededor se condensa en un espacio.

Supongo que esta es una característica que parece un error.

Para eliminar el espacio, coloque todos sus <li> s en una cadena sin espacio en blanco entre ellos.
O
Reducir el tamaño de fuente en la <ul> a 0 y restaurar el tamaño de la <li> s

Fuente

2010-06-15 11:01:17

reduciendo el tamaño de la fuente y restableciéndolo hice el truco para mí, gracias – kitschmaster

Sé que esta pregunta es un poco antigua, pero hay una alternativa más: poner '' y '-> 'before each'

'. Tenga en cuenta que no dije que era una buena solución. Sin embargo, se ha convertido en mi método preferido en comparación con las alternativas anteriores. – ClarkeyBoy

flotar a la izquierda también funciona, pero vino con efectos secundarios no deseados para mí. El tamaño de fuente cero hizo el truco. gracias – nest

También puede establecer font-size:0 para la etiqueta <ul>.

Fuente

2011-11-08 08:56:11 killebytes

lo siento, no leí por completo respuestas @David. – killebytes

fue la mejor solución para mí – wutzebaer

¿Qué pasa con el soporte de navegador? He leído en alguna parte que no funciona en IE <= 7 –

¿Cómo deshacerse del espacio en blanco entre los elementos de la lista horizontal css?

Respuesta

Cuestiones relacionadas