Menu
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.
896
Display:inline-block puts a particular space between two Display:inline-block elements, if not written continually. ^1 Whereas Float never put any space between two elements of its kind. Float floats elements to left with float:left and to right with float:right.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
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>
What about
li {
display:inline-block
};
You can then set properties like width, heigth, padding, margin, etc..
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
