在HTML中使用跨度和顏色時出現問題，CSS

我試圖在聊天窗口上創建一個綠色點，就像Facebook一樣。在HTML中使用跨度和顏色時出現問題，CSS

我是指我的問題的HTML的部分看起來像這樣：

<div class="col-md-8"> 
<span class="green"> </span> Chat (32) 
</div>

我的CSS代碼如下所示：

.green { 
    color: green; 
}

在我的CSS所有其他元素正常工作，所以它不是一個參考問題。只有這一個。綠點沒有被生成。

關於這個問題可能有什麼想法？

來源

2016-09-21 user274065

對不起，我錯過了。我剛剛使用該信息編輯了我的問題。 – user274065

'background-color'，而不是'color';當CSS不起作用時，值得查看你嘗試過的樣式屬性。 –

仍然不起作用...謝謝你的提示，雖然 – user274065

設置顏色爲綠色意味着有在跨度一些文本/字符進行着色（unicode character •應該做）。

.green { 
 
    color: green; 
 
}

<div class="col-md-8"> 
 
<span class="green">•</span> Chat (32) 
 
</div>

或者（如果不能更改HTML），你可能想使用background-color，使元素一輪

.green { 
 
    display:inline-block; 
 
    width:0.5em; 
 
    height:0.5em; 
 
    border-radius:50%; 
 
    background-color: green; 
 
}

<div class="col-md-8"> 
 
<span class="green"> </span> Chat (32) 
 
</div>

來源

2016-09-21 16:49:48

由於span是一個內嵌元素，因此它的大小取決於其內容。

給跨度display inline-block所以響應具有尺寸集，padding給它一個大小，border-radius使其圓形和使用background，不color，給它一個顏色。

.green { 
 
    display: inline-block; 
 
    padding: 6px; 
 
    background: green; 
 
    border-radius: 6px 
 
}

<div class="col-md-8"> 
 
    <span class="green"> </span> Chat (32) 
 
</div>

來源

2016-09-21 16:49:05 LGSon

你失蹤一對夫婦的事情，比如寬度/高度，背景顏色，邊框半徑。

此外，考慮命名你的CSS類他們代表什麼，而不是他們如何最終尋找。

.status { 
 
    width: 16px; 
 
    height: 16px; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
} 
 
.online { 
 
    background-color: green; 
 
}

<div class="col-md-8"> 
 
    <span class="status online"> </span> Chat (32) 
 
</div>

來源

2016-09-21 16:49:25 ksav

這是你在找什麼：

.green { 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    background-color: green; 
 
    width: 10px; 
 
    height: 10px; 
 
}

<div class="col-md-8"> 
 
    <div class="green"></div> Chat (32) 
 
</div>

然後你可以綠色元素變爲另一種顏色時離線。

來源

2016-09-21 16:51:26 Illdapt

CSS：

.greenDot{ 
    background: #42b72a; 
    border-radius: 69%; 
    height: 6px; 
    margin: 0 3px 1px 0; 
    vertical-align: middle; 
    display: inline-block; 
    width: 6px; 
}

HTML

<span class="greenDot"></span>Chat

.greenDot{ 
 
     background: #42b72a; 
 
     border-radius: 69%; 
 
     height: 6px; 
 
     margin: 0 3px 1px 0; 
 
     vertical-align: middle; 
 
     display: inline-block; 
 
     width: 6px; 
 
    }

<span class="greenDot"></span>Chat

來源

2016-09-21 17:01:30 Stormhashe

在HTML中使用跨度和顏色時出現問題，CSS

回答

相關問題