web-dev-qa-db-fra.com

li float vs display: inline

Existe-t-il un meilleur choix que float: left ou display: inline pour aligner les éléments de la liste horizontalement?

exemple: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

Personnellement, je n'aime pas float, mais c'est peut-être plus une chose émotionnelle que logique.

csshtml-lists
18
Jamie Kitson
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>

C’est ce que je préfère surtout parce que lorsque vous utilisez display:inline, vous ne pouvez pas définir de propriétés telles que la largeur, le remplissage (haut et bas), la marge, etc., ce qui est un handicap pour la mise en page.

EDIT 2014

C'est également une option d'utiliser la propriété display: inline-block. Une chose à noter est que, une fois que les éléments de la liste sont insérés en ligne ou en bloc, les espaces sont pris en compte. Par conséquent, il y aura des espaces indésirables entre les éléments.

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; }

Vérifiez le violon ici.

Si vous ne souhaitez pas utiliser la propriété font-size (pour les problèmes de compatibilité de navigateur), vous pouvez également utiliser des commentaires HTML pour vous débarrasser des espaces! Bien que je préfère la méthode ci-dessus.

   <ul><!--
    --><li><a href="http://www.facebook.com">Facebook</a></li><!--
    --><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>
15
Savas Vedova

Qu'en est-il de

li {
       display:inline-block
};

Vous pouvez ensuite définir des propriétés telles que la largeur, la hauteur, le remplissage, la marge, etc.

9
Chris Pesoa

J'ai remarqué quelques erreurs de rendu lors de l'affichage de Inline de LI en chrome. Parfois, ma bordure LI ne s'affiche pas avec le remplissage horizontal approprié.

En général, cependant, j'aime bien Inline, cela vous donne toujours des marges horizontales et des marges intérieures et vous pouvez faire un Nice text-align: center; sur l'UL et utiliser l'UL pour l'espacement vertical.

J'ai tendance à utiliser float uniquement parce qu'un LI est un élément de bloc par défaut et devrait être traité de cette façon à mon avis, mais il existe des cas d'utilisation clairs pour les deux.

2
user2708862

C'est une préférence personnelle.

À partir d'un point CSS, Display:Inline = Float:Left(Right).
Quand il s’agit de rendre des éléments horizontaux, comme <li>.

La règle css Float est plus récente que Display.

0
Scott