Question

我有下面的行，它在文本100％和99.8％

之后导致下一行

任何人都可以帮助我如何在一行中并排显示所有这些。

<span style="font-size:12px;font-weight:bold;padding-left:800px;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span><br />

Answer 1

我认为这个问题是＆＃34; padding-left＆＃34;在每个范围内，它会导致它们转到下一行，因为它们不适合屏幕。

如果删除填充 - 或至少减少值 - 它们将并排显示在一行中。

示例这里： https://jsfiddle.net/zjbot272/

<span style="font-size:12px;font-weight:bold;">99%>=
<span style="color:#69BB1D;">GREEN</span><=100%, 
<span style="">41%>
<span style="color:#FFD700;">YELLOW</span><99.8%,</span> 
<span style="color:#EE543D;">RED</span><99.6%</span>

Answer 2

尝试添加white-space: nowrap;。无论如何你在做什么都很奇怪。

<span style="font-size: 12px; font-weight: bold; padding-left: 800px; white-space: nowrap;">99%&gt;=<span style="color:#69BB1D;">GREEN</span>&lt;=100%, <span style="padding-left: 950px;">41%&gt;<span style="color:#FFD700;">YELLOW</span>&lt;99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span>&lt;99.6%</span>

Span在这个声明中引起了新的界限？

2 个答案: