CODEWITHSUNDEEP
htmlcss
user1174762
user1174762

Reputation: 593

Using padding or margins in an inline list

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?

Upvotes: 0

Views: 196

Answers (5)

Draven Vestatt
Draven Vestatt

Reputation: 87

Use display:inline. Via CSS set a width to your li if you want a fixed width. Use line-height for a fixed height.

Upvotes: 0

jmbertucci
jmbertucci

Reputation: 8234

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!

Upvotes: 6

PREEB
PREEB

Reputation: 1362

Here's a good example I put together to play with. It breaks down each of the concepts you're looking for.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

I would apply all styling to the inside element (A), not the list. I'd style the list for float:, position: or display: only; Whether you use use inline or float is up to you. Just make sure you use display:block on the A-tag.

See my tutorial: http://preview.moveable.com/JM/ilovelists/

Upvotes: 2

anon-e-mouse
anon-e-mouse

Reputation: 126

I prefer to display inline as it seems to make more sense to me to use that over floating something that I suspect was never intended to be floated.

Floating things is very handy for layouts and inlining lists but I am guessing not its original intent.

Upvotes: 2

Related Questions