Il modo migliore per gestire gli spazi bianchi tra gli elementi dell'elenco in linea
-
04-07-2019 - |
Domanda
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.
Soluzione
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.
Altri suggerimenti
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.
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.
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.
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 */
}
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>
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>
<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>