18

Is there a best choice out of float: left or display: inline for aligning list items horizontally?

eg: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

Personally I dislike float, but that maybe more of an emotional thing rather than logical.

Jamie Kitson
  • 3,973
  • 4
  • 37
  • 50
  • You mean aligning them on the *left*, correct? – Pekka Jan 23 '12 at 11:10
  • 2
    possible duplicate of http://stackoverflow.com/questions/1702669/what-is-the-difference-between-floatleft-vs-displayinline-while-every-element and http://stackoverflow.com/questions/1107820/which-is-better-for-left-to-right-layout-float-or-displayinline - trying to find closer matches – BoltClock Jan 23 '12 at 11:10
  • I dislike giving list items a `display:inline`, because they were not designed for that. Just like giving table cells other display values. `float` is what I would go with. – Mr Lister Jan 23 '12 at 12:48

4 Answers4

15
ul { list-style-type: none; overflow: hidden; width:200px; }
ul li { float:left; width: 100px; }
ul li a { display: block; padding: 10px; width:80px; }
ul li a:hover { background: black; }


<ul>
  <li><a href="http://www.facebook.com">Facebook</a></li>
  <li><a href="httpt://www.google.com">Google</a></li>
</ul>

This is what I prefer mostly because when you use display:inline you cannot set properties like width, padding (top and bottom), margin etc... which is an handicap for layout purposes.

EDIT 2014

It is also an option to use the display: inline-block property. One think to note is that once you make the list elements inline or inline-block, white-spaces will be taken into consideration. Hence, there will be unwanted spaces between elements.

ul { list-style-type: none; width: 300px; font-size: 0; }
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; } 
/* The *display and zoom is a IE hack, though can't remember 
   now which one (guess it is IE7) */
ul li a { display: inline-block; padding: 10px; font-size: 13px; }

Check the fiddle here.

If you don't want to use the font-size property (for browser compatibility issues), you can also use html comments to get rid off whitespaces! Though I prefer the method above.

   <ul><!--
    --><li><a href="http://www.facebook.com">Facebook</a></li><!--
    --><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>
Savas Vedova
  • 5,622
  • 2
  • 28
  • 44
9

What about

li {
       display:inline-block
};

You can then set properties like width, heigth, padding, margin, etc..

Chris Pesoa
  • 164
  • 2
  • 3
2

I have noticed some rendering bugs when displaying LI's Inline in chrome. My LI border sometimes does not render with the proper horizontal padding.

In general though, I like Inline, it still gives you horizontal margining and padding and you can do a nice text-align: center; on the UL and use the UL for vertical spacing.

I tend to use float purely because an LI is a block element by default and should be treated that way in my opinion but there are clear use cases for both.

user2708862
  • 21
  • 1
0

It's personal preference.

From a CSS point, Display:Inline = Float:Left(Right).
When it comes to making elements horizontal, like <li>.

The css rule Float is newer than Display.

Persijn
  • 14,624
  • 3
  • 43
  • 72
Scott
  • 1