2010-12-20 8 views
0

私はウェブページ上に画像を表示する方法を探しています。この画像は、順序付けられていないリスト内のリスト項目のすぐ右にある必要があります。好ましくは、それはリスト項目タグ内にあるが、リスト項目内にあるテキストの直後にあることが望ましい。しかし、このイメージをリスト項目タグ内に配置すると、イメージは次の行にバンプされます。なぜこれが起きているのか、そして/またはそれを修正する方法を知っていますか?ありがとう。画像とリストアイテム

+1

どのようなhtmlとcssを使用していますか? [JS Fiddle](http://jsfiddle.net/)、[JS Bin](http://jsbin.com/)にライブデモを投稿できますか? –

+1

イメージをバックグラウンド位置に設定します。 –

答えて

2

あなたのCSSでは背景画像を問題の画像background-position:rightに設定し、右側のパディングに画像の幅を追加します。これにより、リストアイテムの右に現れるイメージの錯覚が効果的に作成されます。

+0

私はCSSの専門家ではありませんが、これはちょっとしたハックのような感じです。ボックスモデルを使ってこれを行うことはできないはずですが、テキストと画像を何かの中で左から右にスタックするボックスにする必要がありますか? –

+1

あなたは私のやり方でそれをやり遂げることができましたか、スパンにテキストをラップするLIにイメージを含めることができますし、とにかくボックスモデルを得るためにCSSをハックする必要があります。そうでなければ、 : "すべてのブラウザで完全にサポートされていない擬似クラス。 – PseudoNinja

+0

@Tom Anderson私はあなたのやり方をしようとしていましたが、実際の解決策は思い付きませんでした。それが私がここに来た理由です。 – Brendan