CODEWITHSUNDEEP
jqueryhtmlcss
Richard Hamilton
Richard Hamilton

Reputation: 26444

Align paragraph with two spans on the same line

I am creating an arcade game with JavaScript and jQuery. In this game, I need to align the level, score and high score in the same line.

My HTML structure looks like this

<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. Span elements are by nature inline elements so they should be able to be on the same line.

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

Here is the JavaScript code I have

$("#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.

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. Later, if you score more than 10, it will drop back to a new line.

Here's the fiddle

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?

Upvotes: 0

Views: 1066

Answers (2)

mhodges
mhodges

Reputation: 11116

add a 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

Upvotes: 2

Yug Kapoor
Yug Kapoor

Reputation: 785

Try

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

P.S. : It's a fun game :)

Upvotes: 0

Related Questions