C'è una scelta migliore tra float: left o display: inline per allineare le voci di elenco orizzontalmente?li float vs display: in linea
esempio: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
Personalmente non mi piace float, ma che forse più di una cosa emotiva piuttosto che logica.
ul { list-style-type: none; overflow: hidden; width:200px; }
ul li { float:left; width: 100px; }
ul li a { display: block; padding: 10px; width:80px; }
ul li a:hover { background: black; }
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="httpt://www.google.com">Google</a></li>
</ul>
Questo è quello che preferisco soprattutto perché quando si utilizza display:inline non è possibile impostare le proprietà come la larghezza, imbottitura (superiore e inferiore), margine ecc ... che è un handicap per il layout.
EDIT 2014
E 'anche la possibilità di utilizzare la proprietà display: inline-block. Si pensi che una volta che si rendono gli elementi di lista inline o inline-block, verranno presi in considerazione gli spazi bianchi. Quindi, ci saranno spazi indesiderati tra gli elementi.
ul { list-style-type: none; width: 300px; font-size: 0; }
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; }
/* The *display and zoom is a IE hack, though can't remember
now which one (guess it is IE7) */
ul li a { display: inline-block; padding: 10px; font-size: 13px; }
Controllare il fiddle qui.
Se non si desidera utilizzare la proprietà font-size (per problemi di compatibilità del browser), è anche possibile utilizzare i commenti html per sbarazzarsi degli spazi bianchi! Anche se preferisco il metodo sopra.
<ul><!--
--><li><a href="http://www.facebook.com">Facebook</a></li><!--
--><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>
La larghezza di impostazione può essere un handicap stesso se il contenuto non si adatta alla larghezza. –
Ho notato alcuni bug di rendering durante la visualizzazione di LI in linea in chrome. Il mio bordo LI a volte non viene visualizzato con il riempimento orizzontale corretto.
In generale però, mi piace In linea, offre ancora margini e spaziature orizzontali e si può fare un bel allineamento del testo: centro; sull'UL e utilizzare l'UL per la spaziatura verticale.
Tendo ad usare il float puramente perché un LI è un elemento di blocco per impostazione predefinita e dovrebbe essere trattato in questo modo secondo me, ma ci sono chiari casi d'uso per entrambi.
Che dire
li {
display:inline-block
};
È possibile quindi impostare le proprietà come la larghezza, altezza, padding, margini, ecc ..
E 'preferenze personali.
Da un punto CSS, Display:Inline = Float:Left(Right).
Quando si tratta di creare elementi orizzontali, ad esempio <li>.
La regola css Float è più recente di Display.
Significa che allinearli su * sinistra *, corretto? –
possibile duplicato di http://stackoverflow.com/questions/1702669/what-is-the-difference-between-floatleft-vs-displayinline-while-every-element e http://stackoverflow.com/questions/1107820/ what-is-better-for-left-to-right-layout-float-or-displayinline - cercando di trovare corrispondenze ravvicinate – BoltClock
Non mi piace dare agli elementi della lista un 'display: inline', perché non sono stati progettati per questo. Proprio come dare alle celle della tabella altri valori di visualizzazione. 'float' è ciò che vorrei andare con. –