將段落與同一行上的兩個跨度對齊

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，它將回到新的一行。

這是小提琴

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

我不明白這種奇怪的行為。

有什么我可以解決的嗎？ 像使用min-width屬性？

Answer 1

添加一個white-space: nowrap;

到段落標簽css，一切都會好起來的。

的CSS

#level {
  white-space: nowrap;
}

空格之間有一個連字符來打斷單詞

Answer 2

嘗試

.game-info {
  position: fixed;
  width: 100%;
}

PS：這是一個有趣的游戲:)