Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Displaying Two Or More Unordered Lists Next To Eachother

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.

like image 690
AlexDev Avatar asked Dec 15 '12 21:12

AlexDev


People also ask

How do you put two objects next to each other in HTML?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.

Can ordered and unordered lists be nested together?

Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients) and an ordered list (the procedure): The ingredients: 100 g. flour.


1 Answers

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

like image 71
ori Avatar answered Oct 20 '22 01:10

ori