HTML List Item without wrapping

Question

I have a list of items where I am trying to put an image next to some text without wrapping to the next line. To better illustrate, I create a simplified version in a fiddle.

http://jsfiddle.net/KCdg3/1/

<ul>
    <li>Test</li>
    <li>
        <div id="TEST2"><span>Test 2</span></div>
        Image
    </li>
    <li>Test3</li>
</ul>

The question is: How do I get the text "Image" to be on the same line (to the right of) the Test2 div rather than on the next line? "Test" should still be above and "Test3" should still be below.

I've noticed if I place the closing div tag after the text, it accomplishes my goal - but in my actual code the div element is being created dynamically in Javascript, and I'd prefer to place the image in the html portion if it is possible.

Just in case it matters: I'm using Firefox 27.0.1

Answer 1

display:inline; or display:inline-block; (Difference) is the way to display the div inline.

<ul>
    <li>Test</li>
    <li>
        <div id="TEST2" style="display:inline;"><span>Test 2</span></div>
        Image
    </li>
    <li>Test3</li>
</ul>

http://jsfiddle.net/mLBbE/

Answer 2

If you cannot affect how the DIV is generated - you can apply external inline style to it e.g.

li > div {
    display:inline-block;
}

Demo: http://jsfiddle.net/KCdg3/5/

This will automatically makes any DIV inside of LI an inline element - without affecting your generated HTML structure. You can fine-tune the CSS selector as needed.

Answer 3

Double, you can add a style to your css for the TEST2. Display it as inline-block.

#TEST2 {
    display: inline-block;
}