Question

I have multiple questions. If I want an inline list to be a certain height/width is it better to use display:inline; and set the height and width to the <ul> element ? Or should I use float:left; and apply overflow:hidden; to the <ul> element? Also, is it better to apply the margin/padding the the <li> element or the <a> inside the list? Do you even need to if you reset the values? Will each occupy as much space as they can or will the last-child be longer to accommodate for excess space?

Answer 1

Your question is pretty theoretical.

You probably need to explain more what you’re trying to do because there are benefits and drawbacks to what you’re talking about.

For example, pure “inline” elements height or width will be ignored. You need to use a block-level element to do that, which includes floated blocks or “inline-block”.

http://jsfiddle.net/3YU3y/3/

And if you float, it might position itself differently than what you’re expected.

If you’re looking to do a horizontal list vs an “inline list”, then there’s plenty of design patterns out there for that. Check out Dan Cederholms website for some real common HTML/CSS patterns:

http://pea.rs

Check out “lists” and “navigation” in particular.

Hope that helps!

Cheers!