Ter quebras de linha entre s

Question

Eu tenho um menu horizontal constituído por elementos <li> com display: inline.

Os elementos são suposto ser ao lado do outro sem problemas.

No código-fonte, eu gostaria de ter cada li em uma linha para depuração mais fácil:

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

No entanto, se eu adicionar um \n depois de cada elemento, os itens de menu tem uma lacuna entre si. I se reunir este é o comportamento esperado, mas existe alguma maneira de desligá-lo usando um "white-space" inteligente configuração ou algo assim?

Edit:. Eu não posso usar float, isto é, em um CMS com a opção de centralizar os itens da lista

Answer 1

Você pode evitar os problemas de renderização, mas manter o maintainable código como este:

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

Ele remove o espaço em branco, mas ainda é fácil de editar os itens em um editor de texto, desde que o CMS não mexer com a marcação que você entra!

Answer 2

Você tem a capacidade de editar o CSS? Se assim for, você pode tentar ajustar os padding / margens no

elemento. Ele parece ser um grande esforço de legibilidade.

Dependendo do navegador que você está usando você pode obter o HTML Tidy http: //users.skynet .be / mgueury / mozilla / , o que lhe dá a opção para arrumar sua fonte, que pode ser o suficiente útil para depurar

Answer 3

CSS + float é seu amigo.

Answer 4

HTML é espaço em branco independente - assim que adicionar quebras de linha não deve ter nenhum efeito. Alguns motores de renderização do navegador não chegam a obter este direito no entanto.

O que você provavelmente vai querer fazer é adicionar

float: left;

para suas tags li para levá-los ao lado do outro.