Maarten Wolfsen Maarten Wolfsen - 2 months ago 6
CSS Question

How can I position nested lists side-by-side?

My fiddle: https://jsfiddle.net/a1g49g2t/7/

I want the ol and ul items to be next to eachother. Is this possible?

Structure:

<ol class="level1">
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>
<ul class="level2">
<li>item2</li>
<li>item2</li>
<li>item2</li>
<li>item2</li>
<li>item2</li>
<li>
<ul class="level3">
<li>item3</li>
<li>item3</li>
<li>item3</li>
<li>item3</li>
</ul>
</li>
</ul>
</li>
</ol>

Answer
ol ul {
    left: 200px;
    top: 0;
    background: #aaa;
}

Demo

Note that the top-level list could be positioned relatively for easier page layout. It doesn't matter as long as it's not left at the default (static).

Comments