HTML: Coloring part of text in a line_问答_开发者

开发者 https://www.devze.com 2022-12-11 18:04 出处：网络

Consider the following: <p> <b> <div style=\"color:rgb(81,33,244)\">Player1</div>

相关专题：

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.