在HTML，CSS中使用span和colors时遇到问题

Question

我正试图在聊天窗口上创建一个绿点，就像facebook一样。

我的html部分引用了我的问题，如下所示：

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

我的CSS代码如下所示：

 .green {
  color: green;
}

我的CSS中的每个其他元素都可以正常工作，因此它不是参考问题。只有这一个。绿点不会生成。

关于问题可能是什么的任何想法？

Answer 1

将颜色设置为绿色表示该跨度中有一些文字/字符需要着色（ 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> 

Answer 2

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

Answer 3

您遗漏了一些事情，例如宽度/高度，背景颜色和边框半径。

另外，考虑用它们代表的名称来命名你的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>

Answer 4

这就是你要找的东西：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后，您可以在离线时将该绿色元素更改为另一种颜色。

Answer 5

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