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

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>