用最好的方式设计无序水平列表

Question

为了使列表水平和隐藏默认的子弹,是有必要给{display:inline},并{float:left}同时向<li>标签或仅仅这些中的任何一个就足够了？

<ul>
<li><a href="#">First item</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">Last item</a></li>
</ul>

如何以最好的方式制作跨浏览器(包括IE6和FF2),像素完美水平列表没有子弹？

什么是最好和简短的方法？

ul {}
li {}
a  {}

Answer 1

不,任何一个人都足够了.你甚至可以使用inline-block,尽管它在FF2中没有很好的支持.隐藏子弹是完成的list-style:none;

您可以快速设置一个简单的测试来检查这些:

#one, #two, #three { list-style:none }
#one li            { float:left }
#two li            { display:inline }
#three li          { display:inline-block }

<ul id="one">
  <li>Float left</li> 
  <li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="two">
  <li>Display inline</li>
  <li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="three">
  <li>Inline-block</li>
  <li>In this example</li>
</ul>

看看他们如何呈现:http://jsbin.com/opiqu3/