css - 消える箇条書き

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

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

弾丸を見えるようにする方法を知っている人はいますか?

Answer 1

これは1年前の投稿であることは知っていますが、他の人が知りたいと思うかもしれません...

コンテンツ管理システムを使用していて、一部のページに画像があり、一部のページに画像が含まれていない場合、リスト アイテムをコンテンツ内で 200 ピクセルにしたくない場合はどうなりますか?

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

overflow:hidden;

それが役立つことを願っています。

Answer 2

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

margin-left:200px;

UL要素であなたの問題を解決します。

または、UL 要素に float:left を適用することもできます。これにより、画像に合わせてフロートしますが、次のコンテンツが同じ行に表示されます。これを防ぐには、UL 要素をクリアするか、UL 要素の後に要素を追加します...

clear:both

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

この動作の詳細については、http://www.positioniseeverything.net/easyclearing.htmlを参照してください。

Answer 3

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

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

display: inline-block;

これを UL に載せます。フロートの後に ul 全体が表示されるように強制します。そうすれば、画像の有無にかかわらずページを作成でき、常に正しく表示されます (FF4、IE7 & 8、Chrome 11 で確認)。

Answer 4

または、background-image の代わりに list-style-image プロパティを使用することもできます。私は先日、まさにこの問題に遭遇しました。フロートが「隣人」に現れるテキストの折り返し動作は、「コンテンツ」にのみ適用され、背景画像には適用されません (たとえば)。