Avere interruzioni di riga tra < li > s

Question

Ho un menu orizzontale composto da elementi < li > con display: inline .

Gli elementi dovrebbero essere uno accanto all'altro senza soluzione di continuità.

Nel codice sorgente, vorrei avere ogni li su una riga per un debug più semplice:

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

Tuttavia, se aggiungo un \ n dopo ogni elemento, le voci del menu hanno uno spazio tra loro. Capisco che questo è il comportamento previsto, ma esiste un modo per disattivarlo usando un "spazio bianco" intelligente impostazione o qualcosa del genere?

  

Modifica: non posso usare il float, questo è in un CMS con l'opzione per centrare le voci dell'elenco.

Answer 1

È possibile evitare i problemi di rendering ma mantenere il codice mantenibile in questo modo:

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

Rimuove gli spazi bianchi ma è comunque facile modificare gli elementi in un editor di testo, a condizione che il tuo CMS non si scherzi con il markup inserito!

Answer 2

Hai la possibilità di modificare il CSS? In tal caso, puoi provare a regolare l'imbottitura / i margini su < li > elemento. Sembra essere un grande sforzo di leggibilità.

A seconda del browser che stai utilizzando, puoi ottenere HTML Tidy http: //users.skynet .be / mgueury / mozilla / , che ti dà la possibilità di mettere in ordine la tua fonte, che potrebbe essere abbastanza utile per il debug

Answer 3

CSS + float è tuo amico.

Answer 4

L'HTML è indipendente dagli spazi bianchi, quindi l'aggiunta di interruzioni di riga non dovrebbe avere alcun effetto. Tuttavia, alcuni motori di rendering del browser non riescono a farlo correttamente.

Quello che probabilmente vuoi fare è aggiungere

float: left;

ai tuoi tag li per metterli uno accanto all'altro.