Horizontal list items: float or inline?

HTML & CSS
1

I’m figuring out that there are cases where one approach is better than the other, and I’m interested to get opinions/advice on what makes this so.

Floating the list items seems to provide more control over padding, height etc, and yet I’ve always thought inline display was the recommendation.

What are people’s preferences when it comes to creating horizontal navigation: floated list items, or inline?

(And while I’m at it, can I just thank all the regular posters here - this is a great place to come for info. Nice work.)

2

Hi qazpoc,

My preference is floats:

  1. Have lots of control.
  2. Beyond navigation,floating all elements can help reduce the I.E. bugs.

Regards,
Steve

3

Hi,
Yes you do have more control when floating them. By floating the list items you generate a block box around them, that is what allows you to set dimensions when needed.

I will use display:inline-block; whenever I want centered widthless list items. Though you still have text nodes to contend with they can be controlled with negative side margins or by removing the whitespace in the html.

It is either floats or inline-block for me. :wink:

4

Pretty much agree with what Rayzur said… I use floats the most because they are the most predictable behavior-wise when it comes to building a left or right justified menu. The behavior or float:left anchors/LI inside a float:right container for example being one of the many reasons to use it.

But you can’t center floats… and you can’t set top/bottom padding, width or height on a display:inline element… so that leaves inline-block as your only ‘real’ choice if the menu needs to be centered and you cannot predict how many/how wide the content is going to be.

Thankfully with FF3 mozilla finally TRIED pulling their head out of their backside on inline-block, but didn’t really get it right until FF 3.6… With so many non-Firefox gecko browsers lagging behind and still using gecko 1.8, it’s a good idea if you use inline-block to include BOTH the -moz testing equivalents.

display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;

In that order. Also helps to remember that IE 6/earlier only has partial support for inline-block where you can only set it on inline-level elements… so if you want to set it on LI you’re SOL. It’s why in menus the most I usually put on my LI is display:inline and a haslayout trigger.

Which is when it’s important to know the difference between display:inline and inline-level; and the difference between display:block and block-level - the display states might default to the same as the level, but that’s NOT what the ‘level’ means… but that’s HTML for you, the default appearance of a tag is not what the tag means.

5

Ray and Jason have pretty much summed it up :slight_smile:

Use floats if you just have one horizontal line that doesn’t need to wrap. If you want it centred or you want lines to wrap without snagging and without setting heights then use inline-block but with the caveats that Ray and Jason mentioned above.

In the end it does depend on the job in hand and if you just want some text in a list horizontal then display:inline would be fine also. However if you need padding and borders then display:inline isn’t the best tool.