Question

请考虑以下事项：

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

在这个播放器1和播放器2中以不同的颜色显示，但是'div'打破了这一行，它看起来像：

PLAYER1

超越

Player2

在1小时20分钟内

如何为玩家着色并将它们保持在同一条线上？

Answer 1

使用span等div而不是em等块元素。事实上，鉴于样式的目的似乎是强调玩家名称，我会说<!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>是最合适的标签：

{{1}}

Answer 2

设置b元素的样式。

Answer 3

使用span而不是div

Answer 4

将div改为span

另外，请考虑添加类属性并将样式信息放在外部CSS文件中。

HTML：在一行中着色文本的一部分

4 个答案: