Tener saltos de línea entre < li > s

Question

Tengo un menú horizontal que consiste en elementos < li > con display: inline .

Se supone que los elementos deben estar uno al lado del otro sin problemas.

En el código fuente, me gustaría tener cada li en una línea para una depuración más fácil:

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

Sin embargo, si agrego un \ n después de cada elemento, los elementos del menú tienen un espacio entre ellos. Entiendo que este es el comportamiento previsto, pero ¿hay alguna forma de desactivarlo usando un inteligente "espacio en blanco"? ajuste o algo?

  

Editar: no puedo usar flotante, esto está en un CMS con la opción de centrar los elementos de la lista.

Answer 1

Puede evitar los problemas de representación pero mantener el código mantenible de esta manera:

<ul
  ><li>item 1</li
  ><li>item 2</li
  ><li>item 3</li
></ul>

Elimina los espacios en blanco, pero aún así es fácil editar los elementos en un editor de texto, ¡siempre que su CMS no se meta con el marcado que ingresó!

Answer 2

¿Tiene la capacidad de editar el CSS? Si es así, puede intentar ajustar el relleno / márgenes en < li > elemento. Parece ser un gran esfuerzo de legibilidad.

Dependiendo de qué navegador esté utilizando, puede obtener el HTML Tidy http: //users.skynet .be / mgueury / mozilla / , que le da la opción de ordenar su fuente, que podría ser lo suficientemente útil para la depuración

Answer 3

CSS + float es tu amigo.

Answer 4

HTML es un espacio en blanco independiente, por lo que agregar saltos de línea no debería tener ningún efecto. Sin embargo, algunos motores de renderizado del navegador no lo hacen bien.

Lo que probablemente quieras hacer es agregar

float: left;

a sus etiquetas li para que estén una al lado de la otra.