Il modo migliore per gestire gli spazi bianchi tra gli elementi dell'elenco in linea

Question

Il mio HTML è il seguente:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

E il mio css:

#nav {
    display: inline;
}

Tuttavia viene visualizzato lo spazio bianco tra i li. Posso rimuovere lo spazio bianco facendolo collassare in questo modo:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

Ma questo viene mantenuto in gran parte a mano e mi chiedevo se ci fosse un modo più pulito di farlo.

Answer 1

Diverse opzioni qui, prima ti darò la mia pratica normale durante la creazione di elenchi in linea:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Quindi il CSS per farlo funzionare come previsto:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Ovviamente ho tralasciato il passaggio del mouse e i set attivi, ma questo crea una buona navigazione a livello di blocco, ed è un metodo molto comune per farlo pur mantenendo gli standard. / * ricordati di modificare a tuo piacimento, aggiungere colore allo sfondo, eccetera * /

Se desideri mantenerlo solo con il testo e solo in linea, nessun elemento di blocco credo che vorresti aggiungere:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Rendendosi conto che si desidera RIMUOVERE lo spazio bianco, basta regolare i margini / riempimento di conseguenza.

Answer 2

Un altro modo utile per eliminare lo spazio bianco è di impostare la proprietà font-size dell'elenco su 0 e quella degli elementi dell'elenco sulla dimensione richiesta.

Answer 3

Quello che vuoi veramente è il CSS3 white-space-collapse: scartare . Ma non sono sicuro che alcuni browser supportino effettivamente quella proprietà.

Una coppia di soluzioni alternative è quella di lasciare che la coda di un tag consumi lo spazio bianco. Ad esempio:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

Un'altra cosa che ho visto fare è usare i commenti HTML per consumare spazi bianchi

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

Vedi la soluzione di questo tappetino se stai bene usando i float e in base ai requisiti potresti dover aggiungere un < li > che è impostato su clear: both; .

Ma la proprietà CSS3 è probabilmente il migliore modo teorico.

Answer 4

Una soluzione migliore per gli elementi dell'elenco è utilizzare:

#nav li{float:left; width:auto;}

Ha esattamente lo stesso effetto visivo senza il mal di testa.

Answer 5

Adotta HTML non basato su XML e ometti < / li > .

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Quindi imposta la proprietà display degli elementi su inline-block invece che inline.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Answer 6

Il problema è la dimensione del carattere nell'UL. Impostalo su 0 e scomparirà, ma non vuoi che il tuo testo reale sia così piccolo, quindi imposta la dimensione del tuo carattere LI su quello che vuoi che sia.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

Answer 7

Ho avuto lo stesso problema e nessuna delle soluzioni sopra riportate è stata in grado di risolverlo. Ma ho scoperto che questo funziona per me:

Invece di questo:

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

costruisci il tuo codice html in questo modo (spazi bianchi prima e dopo il testo del link):

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

Answer 8

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>