html - 背景画像が 1 行にある UL LI

Question

1 つのトリッキーなアライメントの問題をデバッグしています。ここにjsfiddleがあります。問題は、評価「親指」の上下が 1 つの画像に存在することです。私はbackground-positionさまざまな画像を生成するために使用しています。

見た目はよくできていますが、4 つの機能すべてを背景画像とともに 1 行で表示する必要があります。

誰もそれを修正する方法を知っていますか?

Answer 1

私が理解していると思うことから、あなたは評価クラスを別のスパンでliの実際のテキストにしたいと思っています。

<li><span class="rating up"></span>Courteous Staff</li>

次に、スパンをに設定するdisplay: inline-block;と、あなたが求めていると思うものが得られるはずです。

http://jsfiddle.net/spacebeers/U2Wax/35/

正しく配置するには、もう少し作業を行う必要がありますが、良いアイデアが得られます。

Answer 2

このCSSスタイルを追加しようとしましたか?

white-space: nowrap;