浮动图像列表项左侧和其他列表项右

Question

我有一个无序列表，其中包含一个列表项，里面有一个图像，还有一些其他列表项，里面只有文本。 我想将列表项浮动到图像左侧，而其余列表项应该浮动到右侧。

最好的方法是什么？ （另外，在列表项中包含图像是不好的风格？）

Answer 1

在列表项中包含图像很好。但是，没有纯CSS方式来识别列表项包含图像并以不同方式设置样式。

你可以做的是在列表项中添加一个类，然后使用它进行样式化。

ul {
border: 1px solid red;
padding: 0;
max-width: 50%;
margin: 0 auto;
overflow: hidden;
}

li {
list-style-type: none;
float: right;
padding: 0;
margin: 0;
border: 1px solid green;
}

li.image {
float: left;
}

<ul>

<li class="image"><img src="http://placehold.it/200x200" /></li>
<li>Text</li>
<li>Text</li>

</ul>