html - UL LI 与背景图像在一排

Question

我正在调试一个棘手的对齐问题。这是jsfiddle。问题是评级“拇指”向上和向下出现在单个图像中。我background-position用来生成不同的图像。

视觉效果看起来不错，但我需要将所有四个特征与背景图像一起显示在一行中。

有谁知道如何修理它 ？

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;