jquery - 将段落与同一行上的两个跨度对齐

Question

我正在使用 JavaScript 和 jQuery 创建街机游戏。在这个游戏中，我需要将级别、分数和最高分对齐在同一行。

我的 HTML 结构是这样的

<div class="game-info">
  <p id="level">
    <span id="score"></span>
    <span id="high-score"></span>
  </p>
</div>

对于 CSS，我想在段落和两个跨度之间提供一些呼吸空间。 Span 元素本质上是 inline 元素，因此它们应该能够位于同一行。

#score, #high-score {
  margin-left: 10%;
  font-weight: bold;
}

这是我的 JavaScript 代码

$("#level").html("<strong>Level: </strong>" + level + 
"<span id='score'>Score: " + score + "</span><span id='high-score'> High Score: " + 
highScore() + "</span>");

如您所见，我已将所有内容清楚地包装在 span 元素中。

我希望它看起来像这样

Level: 1         Score: 4      High Score: 16

但是，它有一些疯狂的效果。

它会从它自己的行中的高分值开始。并且在连续答对 5 或 6 个之后，它就会排在正确的行上。稍后，如果您的得分超过 10，它将回到新的一行。

这是 fiddle

https://jsfiddle.net/mypkktu7/1/

我不明白这种奇怪的行为。

有什么办法可以解决吗？类似于使用 min-width 属性？

Answer 1

添加一个white-space: nowrap;

添加到您的段落标记 css 中，您会很好。

CSS

#level {
  white-space: nowrap;
}

空白之间有一个连字符来分隔单词