Creating a horizontal menu - inline vs inline-block, vs. floats?

While creating my horizontal menu using the <ul><li>....</li></ul> I came across a few behaviors that I didn't quite understand.

ul li {display:inline;} Why does this still cause the menu to be vertical? If I add float:left then it becomes horizontal, but shouldn't it be enough to just set the display to inline?
On the other hand just doing: ul li {display:inline-block;} results in a horizontal menu without the need of using float. Why is that? Also, when creating horizontal menus which method is better? Or is there a third method that is better than these two?

html
css

2012-04-04 20:16
by paul smith

it's hard to give you an answer without the relevant cs - David Nguyen 2012-04-04 20:18

Inline elements cannot accept padding and margins, so styling would be limited on display:inline - Diodeus - James MacFarlane 2012-04-04 20:18

@David My aim here is to just ask more general practices (without needing more css). Basically boiling down to: why is float:left needed to make it show horizontally when using display:inline, yet using display:inline-block doesn't need float:left to show horizontally - paul smith 2012-04-04 20:37

Inline is the default value for display, it just puts thing in the normal order.

See http://www.w3schools.com/cssref/pr_class_display.asp for more clarification.

2012-04-04 20:21
by RyanS

try inline-bloc - RyanS 2012-04-04 20:22

I think float usually for drop-down menus and inline-block is just for 1 line menu

2012-04-06 07:39
by FoxKllD