HTML：着色文本的一部分在一條線上

考慮以下幾點：HTML：着色文本的一部分在一條線上

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

我怎樣才能顏色的球員，但讓他們在同一行？

來源

2009-11-19 KalEl

使用範圍，而不是DIV

來源

2009-11-19 13:49:53

更改div來跨越

另外，考慮添加類屬性，並把你的風格信息的外部CSS文件。

來源

2009-11-19 13:50:04 MattBelanger

+1類屬性。樣式不需要在一個單獨的文件中。使用類名而不是內聯樣式將有助於描述意圖，使代碼更易於理解。它將提供一個集中的定義，當你決定改變顏色時，它可以防止後來的霰彈槍手術。它還減少了對「b」標籤的需求，因爲您可以將字體重量規格附加到類定義中。 – 2009-11-19 14:03:53

風格的b元素。

來源

2009-11-19 13:50:17 Quentin

+1注意到在給定的例子中添加額外的元素是完全多餘的 – 2009-11-19 13:59:11

使用inline element，如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>

來源

2009-11-19 13:50:23

HTML：着色文本的一部分在一條線上

回答

相關問題