img inside
with property "display: inline" goes out of li tag

Question

I have an unordered list, listaAuto, which is filled with <li> items, which contain an img for each.

The problem is that if I use the <li> property display: inline;, they won't expand to contain the images. Instead, if I display them horizontally, they are no mistakes.

I already tried using overflow: auto, height: auto, clear: both: and other solutions, but I still can't find the way.

HTML:

<body>
    <div>
        <ul id="listaAuto">
            <li><img src="example.png" width="121.33" height="75.92"/></li>
            <li><img src="example.png" width="121.33" height="75.92"/></li>
        </ul>
    </div>
</body>

CSS:

#listaAuto, li{
    list-style: none;
    padding: 5px;
}

li{
    clear: both;
    display: inline;
    border: 1px solid black;
}

Current output:

Do you mean to use display:inline-block; on the li instead? – sol Mar 19 '17 at 13:55 — sol, Mar 19 '17 at 13:55
@ovokuro yeah, I solved thanks to the guys below – UrbiJr Mar 19 '17 at 13:58 — UrbiJr, Mar 19 '17 at 13:58

Andre Pena · Accepted Answer · 2019-06-26T12:00:11.887

Use inline-block for the li items:

https://jsfiddle.net/y86263mq/

Based on another Stackoverflow answer:

Inline elements:

respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
see very important side notes on this [here][1].

Block elements:

respect all of those
force a line break after the block element

Inline-block elements:

allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width

Simple explaination

inline-block elements can have the heights defined. In this case, you're not explicitly setting the heights but the contents are.

score 2 · Answer 2 · answered Mar 19 '17 at 14:01

2

Add display:inline-block for li and remove the unnecessary clear:both. Refer this fiddle https://jsfiddle.net/wsmzhn1h/

answered Mar 19 '17 at 14:01

Gayathri Mohan

161
1
10

score 1 · Answer 3 · answered Mar 19 '17 at 13:55

1

Adding float: left; and removing clear:both; on the li should do the trick. https://jsfiddle.net/y8sxhv1z/2/

answered Mar 19 '17 at 13:55

Kappa

193
1
2
13

score 1 · Answer 4 · answered Mar 19 '17 at 13:57

1

You may try this.

li{
display: inline-block;
}

li img{
max-width: 100%;
}

answered Mar 19 '17 at 13:57

Sourov Roy Chowdhury

113
5

score 0 · Answer 5 · answered Mar 19 '17 at 14:00

#listaAuto, li{
    list-style: none;
    padding: 5px;
}

li{
 width: auto;
 float: left;
    display: block;
    border: 1px solid black;
}

<body>
    <div>
        <ul id="listaAuto">
            <li><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="121.33" height="75.92"/></li>
            <li><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="121.33" height="75.92"/></li>
        </ul>
    </div>
</body>

img inside with property "display: inline" goes out of li tag

5 Answers5

img inside
with property "display: inline" goes out of li tag