li float vs display：inline [英] li float vs display: inline

问题描述

水平对齐列表项是否有最佳选择 float：left 或 display：inline / p>

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

我个人不喜欢<$ c

解决方案

  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 您不能设置属性，如宽度，填充（顶部和底部），边距等...这是布局目的的障碍。

EDIT 2014

也可以使用 display：inline-block 属性。一个想法要注意的是，一旦你使列表元素inline或inline-block，将考虑空格。因此，元素之间会有不必要的空格。

  ul {list-style-type：none; width：300px; font-size：0; } 
 ul li {display：inline-block; * display：inline; zoom：1; margin-right：10px; } 
 / * *显示和缩放是一个IE的黑客，虽然不记得
现在哪一个（猜测是IE7）* / 
 ul li a {display：inline-block ; padding：10px; font-size：13px; } 
  

检查小提琴。

如果您不想使用 font-size 属性兼容性问题），你也可以使用html注释来摆脱whitespaces！虽然我更喜欢上面的方法。

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

Is there a best choice out of float: left or display: inline for aligning list items horizontally?

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

Personally I dislike float, but that maybe more of an emotional thing rather than logical.

解决方案

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>

This is what I prefer mostly because when you use display:inline you cannot set properties like width, padding (top and bottom), margin etc... which is an handicap for layout purposes.

EDIT 2014

It is also an option to use the display: inline-block property. One think to note is that once you make the list elements inline or inline-block, white-spaces will be taken into consideration. Hence, there will be unwanted spaces between elements.

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

Check the fiddle here.

If you don't want to use the font-size property (for browser compatibility issues), you can also use html comments to get rid off whitespaces! Though I prefer the method above.

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

这篇关于li float vs display：inline的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！