HTMLでスパンと色を使用する際に問題がある、CSS

Question

Facebookのようにチャットウィンドウに緑色の点を作成しようとしています。私の問題を参照するHTMLの

私のセクションでは、次のようになります。

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

私のCSSコードは次のようになります。私のCSSで

.green { 
    color: green; 
} 

他のすべての要素が正常に動作し、それは参考になる問題ではありません。これだけ。緑のドットは生成されていません。

問題の原因が考えられますか？

Answer 1

が着色するというスパンでのいくつかのテキスト/文字があることを意味し（unicode character •を行う必要があります）。また

.green { 
 
    color: green; 
 
}

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

---

あなたは

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

ラウンド要素を background-colorを使用して作成することもできます（ HTMLを変更することができない場合）

Answer 2

spanはインライン要素なので、その内容によってサイズが決まります。

は、paddingは、それにサイズを与えるためにborder-radiusがラウンドを行い、それに色を与えないcolorbackgroundを、使用するdisplay inline-blockはそれがサイズのセットを持つに応答スパンを与えます。

.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

これは、あなたが探しているものです：

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

その後、あなたは別の色オフラインにその緑の要素を変更することができます。

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