CODEWITHSUNDEEP
csshtml-lists
Jamie Kitson
Jamie Kitson

Reputation: 4140

li float vs display: inline

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.

Upvotes: 18

Views: 58213

Answers (4)

Scott
Scott

Reputation: 1

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.

Upvotes: 0

Savas Vedova
Savas Vedova

Reputation: 5692

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>

Upvotes: 15

Chris Pesoa
Chris Pesoa

Reputation: 174

What about

li {
       display:inline-block
};

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

Upvotes: 9

user2708862
user2708862

Reputation: 21

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.

Upvotes: 2

Related Questions