消える箇条書き

質問

上のページには、左に浮かぶ画像があります。その右側には、「機能」というタイトルのリストがあります。リスト項目には背景画像がありますが、表示されていません。リスト2は、背景画像の外観を示しています。

弾丸を表示する方法を知っている人はいますか？

解決

画像にはfloat：leftプロパティがあります。したがって、リスト項目は「後ろに」レンダリングされます。画像。

margin-left:200px;

UL要素で問題を解決します。

別の方法として、UL要素にfloat：leftを適用できます。これにより、画像の右側に浮かびますが、次のコンテンツが同じ行に表示されます。これを防ぐには、 UL要素をクリアするか、UL要素の後に要素を追加します。 ...

clear:both

...それに適用されます。

他のヒント

これは1年前の投稿ですが、他の人が知りたいかもしれません...

コンテンツ管理システムを使用しており、一部のページに画像と＆amp;コンテンツの中にリストアイテムを200ピクセルにしたくない人もいますか？

このCSSをUL / OL要素に追加できます：

overflow:hidden;

お役に立てば幸いです。

このスレッドは確かに古いですが、常に関連しています...

別の代替ソリューション：

display: inline-block;

これを ULに追加します。フロートの後にul全体を強制的に表示します。そうすれば、画像の有無にかかわらずページを作成でき、常に正しく表示されます（FF4、IE7＆amp; 8、Chrome 11でチェックされます）。

別の方法として、background-imageの代わりにlist-style-imageプロパティを使用できます。先日この問題に遭遇しました。「隣人」に浮かぶテキストの折り返し動作は、背景画像ではなく「コンテンツ」にのみ適用されます（たとえば）。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow