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/

Answer 2

display:inline不是必需的，但float:left是必要的，以使其保持水平，就像你说隐藏默认子弹一样，那么即使list-style:none也是必要的。

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

2 个答案: