[Solved] Block level elements inside lists

[Harun]

here is my pen:
http://codepen.io/hrazith/pen/CehGr

I am stumped by basic stuff.
Why are the block level elements inside <li> hindering how i want the<li> to be displayed. I am basically looking to turn this vertical list to a horizontal one.

[shaneisme]

Block level elements will take up 100% of the width of its parent by default. The list will let block level elements fill up its parent too, all the way up until there’s a width declared on something.

You would need to apply a width to the .legend ul li, or for specificity’s sake you can just give each li its own class (it’s faster during render that way too).

[Harun]

Thanks shaneisme.

[Author]

Posts