的CSS

Question

我正在用JavaScript和jQuery创建一个街机游戏。在这个游戏中，我需要将水平，得分和高分对齐在同一行。

我的HTML结构看起来像这样

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

对于CSS，我想在段落和两个跨度之间提供一些喘息空间。跨度元素本质上是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;
}

white-space之间有一个连字符来打破单词

Answer 2

尝试

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

P.S。：这是一个有趣的游戏：）

将段落与同一行上的两个跨距对齐

2 个答案:

的CSS