HTML: Coloring part of text in a line
Consider the following:
<p>
<b>
<div style="color:rgb(81,33,244)">Player1</div>
</b>
to overtake
<b>
<div style="color:rgb(187,4,0)">Player2</div>
</b>
in 1 hour 20 minutes
</p>
In this Player 1 and Player 2 are shown in different colors, however the 'div' breaks the line and it looks开发者_StackOverflow社区 something like:
Player1
to overtake
Player2
in 1 hour 20 minutes
How can I color the players and yet keep them on the same line?
Use an inline element such as span rather than a block element such as div. In fact, given that the purpose of the styling seems to be to emphasize player names, I would say em is the most appropriate tag to use:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.status em { font-weight:bold; font-style:normal }
.player1 { color:rgb(81,33,244) }
.player2 { color:rgb(187,4,0) }
</style>
</head>
<body>
<p class="status"><em class="player1">Player1</em> to overtake <em
class="player2">Player2</em> in 1 hour 20 minutes</p>
</body>
</html>
Style the b elements.
Use span instead of div
Change your div to span
Also, consider adding class attributes and putting your style information in an external CSS file.
加载中,请稍侯......
精彩评论