Question

To make lists horizontal and hide default bullets, is it necessary to give {display:inline} and {float:left} both to the <li> tags or anyone of these alone is enough?

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

How to make cross browser (including IE6 and FF2) , pixel perfect horizontal list without bullet in best way?

What is best and short method?

ul {}
li {}
a  {}

Answer 1

No, either one alone is enough. You could even use inline-block if you like, although it doesn’t have very good support in FF2. Hiding bullets is done with list-style:none;

You could setup a simple test quickly to check these:

#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>

See how they render: http://jsbin.com/opiqu3/