¿Cómo deshacerse de espacio en blanco entre los elementos de la lista horizontales css? [duplicar]

https://stackoverflow.com/questions/3043707

27-09-2019
|

Pregunta

Esta pregunta ya tiene una respuesta aquí:

¿Por qué hay un vacío inexplicable entre estos inline- bloquear elementos div? 6 respuestas
¿Cómo se quita el espacio entre los elementos inline-block? 38 respuestas

Tengo la siguiente página de prueba y css. Cuando se muestra, hay una brecha 4 píxeles entre cada elemento de la lista. ¿Cómo consigo los elementos para estar al lado de uno al otro?

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

Solución

Se necesita usar display:block y float:left en los lis para eliminar el espacio. Cuando están en línea las golosinas navegador como palabras, y así deja espacio en el medio.

También vea mi pregunta similar .

Otros consejos

Combinar @Skilldrick y @teedyay y usted tiene su respuesta y explicación.
Si <li>s son tratados como palabras que cualquier espacio en blanco alrededor de ellos se condensa a un solo espacio.

Así que supongo que esta es una característica que se ve como un error.

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

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

Me temo que esto es demasiado sucia, pero estaré (agradablemente) sorprendido si hay una solución limpia para esto.

Ponga todos sus <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.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow