浮動小数点画像のリストアイテムとその他のリストアイテム

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>