Стилизация неупорядоченного горизонтального списка ... наилучшим возможным способом

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 также необходимо.