Question

First I’ll clarify that I’m not trying to display list items inline. I know you can do that by using css:

li { display: inline; }.

What I’m trying to do is position two ul’s next to eachother using a relative position, but it should work without the relative position also.

I’ve tried

ul { display: inline; }

but it doesn’t work. They won’t appear on the same line. Funny since every other block element that I’ve tried to display inline like, div, li works just fine. I’ve done a lot of experimenting with making sure that width of the elements is something that could fit next to eachother and putting the ul’s inside div’s that display inline. So my question is, is ul a tag that is impossible to display inline?

P.S. If it is impossible I’ll probably go with a absolute position to line them up together, maybe I could use float also but float would not work well in my webpage layout.

Answer 1

Use inline-block. See fiddle

ul { display: inline-block; }

P.S. I used the fiddle from @jmeas’s comment, but assumed you wanted to keep display: block on the lis