[英]Align paragraph with two spans on the same line
I am creating an arcade game with JavaScript and jQuery. 我正在使用JavaScript和jQuery创建街机游戏。 In this game, I need to align the level, score and high score in the same line.
在此游戏中,我需要在同一行中对齐级别,得分和高分。
My HTML structure looks like this 我的HTML结构如下所示
<div class="game-info">
<p id="level">
<span id="score"></span>
<span id="high-score"></span>
</p>
</div>
For the CSS, I want to provide some breathing room, between the paragraph and the two spans. 对于CSS,我想在段落和两个跨度之间提供一些喘息的空间。 Span elements are by nature
inline
elements so they should be able to be on the same line. Span元素本质上是
inline
元素,因此它们应该能够在同一行上。
#score, #high-score {
margin-left: 10%;
font-weight: bold;
}
Here is the JavaScript code I have 这是我拥有的JavaScript代码
$("#level").html("<strong>Level: </strong>" + level +
"<span id='score'>Score: " + score + "</span><span id='high-score'> High Score: " +
highScore() + "</span>");
As you can see, I have clearly wrapped everything in span elements. 如您所见,我清楚地将所有内容都包裹在span元素中。
I'd like it to look like this 我希望它看起来像这样
Level: 1 Score: 4 High Score: 16
However, it has some crazy effects. 但是,它有一些疯狂的作用。
It will start out with the value for high score on it's own line. 它将以自己行上的高分值开始。 And after 5 or 6 correct answers in a row, it will line up on the correct line.
并且在连续回答5或6个正确答案后,它将在正确的行上排列。 Later, if you score more than 10, it will drop back to a new line.
以后,如果您的得分超过10,它将回到新的一行。
Here's the fiddle 这是小提琴
https://jsfiddle.net/mypkktu7/1/ https://jsfiddle.net/mypkktu7/1/
I do not understand this weird behavior. 我不明白这种奇怪的行为。
Is there anything I can do to fix it? 有什么我可以解决的吗? Something like using a
min-width
property? 像使用
min-width
属性?
add a white-space: nowrap;
添加一个
white-space: nowrap;
to your paragraph tag css and you'll be good. 到段落标签css,一切都会好起来的。
#level {
white-space: nowrap;
}
white-space has a hyphen in between to break the words 空格之间有一个连字符来打断单词
Try 尝试
.game-info {
position: fixed;
width: 100%;
}
PS : It's a fun game :) PS:这是一个有趣的游戏:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.