Displaying Two Or More Unordered Lists Next To Eachother

29,293

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

Share:
29,293
AlexDev
Author by

AlexDev

I'm mostly knowledgeable in web design (HTML, CSS & Wordpress) and I have good grasp of Javascript, although still very much a novice. I also have foundational knowledge in C, C++ and Python. I've written small non-gui apps in C & C++. While in python I've done small games with graphics using pygame. I have a desire to further develop my web design skills within HTML5 & CSS3 so I can tap it's amazing power for creative purposes within design, but also gaming.

Updated on November 09, 2020

Comments

  • AlexDev
    AlexDev over 3 years

    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.