Question

我有一个无序列表listaAuto，其中包含<li>个项目，每个项目包含一个img。

问题是如果我使用<li>属性display: inline;，它们将不会展开以包含图像。相反，如果我水平显示它们，它们就不会出错。

我已尝试使用overflow: auto，height: auto，clear: both:和其他解决方案，但我仍然无法找到方法。

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;
}

当前输出：

Answer 1

对inline-block项使用li：

https://jsfiddle.net/y86263mq/

内联元素：

尊重左派＆amp;右边距和填充，但不 top＆amp;底
无法设置宽度和高度
允许其他元素左右坐着。
在[这里] [1]上看到非常重要的附注。

块元素：

尊重所有这些
在块元素

内联块元素：

允许其他元素左右坐着
尊重顶级＆amp;底部边距和填充
尊重身高和宽度

source

简单解释

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

Answer 2

在li上添加float: left;并删除clear:both;应该可以解决问题。 https://jsfiddle.net/y8sxhv1z/2/

Answer 3

你可以试试这个。

li{
display: inline-block;
}

li img{
max-width: 100%;
}

Answer 4

为li添加display:inline-block并删除不必要的clear:both。请参阅此小提琴https://jsfiddle.net/wsmzhn1h/

Answer 5

＆＃13;

#listaAuto, li{
    list-style: none;
    padding: 5px;
}

li{
	width: auto;
	float: left;
    display: block;
    border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

img里面的<li>属性“display：inline”不在li标签中

5 个答案: