List item inline problem

Question

I am trying to create a simple unordered list, and everything seems to be perfectly fine, until each list item contains a DIV, then list seems to ignore display: inline css line, and displays the divs in block style.

CSS:

#wrapper ul li
{
    display:inline;
}

HTML:

<div id="wrapper">
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

But if i make each list item to contain a DIV, then the list items are no longer displayed inline,

<div id="wrapper">
    <ul>
        <li><div>item1</div></li>
        <li><div>item2</div></li>
        <li><div>item3</div></li>
    </ul>
</div>

How do i solve this issue.. Thanks in advanced. If more detail is needed, I can provide more details.

Answer 1

That CSS tells it to make the li inline, display does not inherit, so the div is still displaying as a block. You could explicitly tell it to make ul li div display: inline as well, but I think it would be better to just avoid using divs in an li.

Answer 2

Basically, your li's are displaying inline, but the divs inside are still block level, so that's how they display inside your li. If you really, really want this to work, as is, make those divs explicitly inline...

#wrapper ul li, #wrapper ul li div
{
display:inline;
}

...but, Jeffrey Aylesworth and blake are both right - you're better off skipping the div, if you have control of that content. Use something else that's already inline.