浮動圖像列表項目左和其他列表項目右

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>