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?
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.