li float vs display:inline

Question

是否有一个最佳的选择出来的float: left或display: inline用于水平对齐列表中的项目？

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

就个人而言,我不喜欢float,但这可能更像是一种情感而非逻辑.

Answer 1

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>

这是我最喜欢的,因为当你使用时,display:inline你不能设置宽度,填充(顶部和底部),边距等属性......这是布局目的的障碍.

编辑2014

这也是使用该display: inline-block物业的选择.需要注意的是,一旦将列表元素设置为内联或内联块,就会考虑使用空格.因此,元素之间会有不需要的空间.

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

在这里查看小提琴.

如果您不想使用该font-size属性(对于浏览器兼容性问题),您还可以使用html注释来摆脱空白!虽然我更喜欢上面的方法.

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

Answer 2

关于什么

li {
       display:inline-block
};

然后,您可以设置宽度,高度,填充,边距等属性.