在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

回答

相关问题