two lines / line break in li element

Question

I have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?

<ul>
        <li>

                <img src="img/a.png" />
                A

        </li>
        <li>

                <img src="img/b.png" />
                B

        </li>
        <li>

                <img src="img/c.png"/>
                C

        </li>
    </ul>

Solution 1

You will need to change your CSS as follows:

li { 
  display: inline-block; 
}

li img {
  display: block;
}

Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ

Solution 2

This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :

<ul>
    <li>
        <img src="http://placehold.it/140x100" />
        <p>Your text here</p>
    </li>
    <li>
        <img src="http://placehold.it/140x100" />
        <p>Your text here</p>
    </li>
    <li>
        <img src="http://placehold.it/140x100" />
        <p>Your text here</p>
    </li>
</ul>

jsFiddle

Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.

Comments

[Lal]

Why dont you use <br/> ?

[Super User]

Just add display:block om image

[Laurent S.]

@Lal > While I use it too because I find it easier, it is important to note the <br /> tag isn't semantic...