CSS - 在句子中使用多个 css 类

Question

 .dot { height: 12px; width: 12px; background-color: red; border-radius: 50%; display: inline-block; }.red-tag { color: red; font-weight: bold; }

 <div> <p>Online sales this quarter were</p> <div class="dot" /> <p class="red-tag">HIGH</p> <p>Predictions indicate sales will continue to rise.</p> </div>

I am attempting to write a sentence using different css classes. At the moment I am having issues keeping them all in-line. I am expecting the outcome of the sentence to flow in one sentence just like:

Online sales this quarter were (css dot) HIGH. Predictions indicate sales will continue to rise.

Currently, after adding a the .dot tag; it shows on the line below and due to the inline block it affects the sentence after it. I am attempting to have it all sitting in one line. I've tried accomplishing this by wrapping my sentence in a div tag; as well as switching <span class="dot"> to <div class="dot"/> which ended up giving me the same result.

Answer 1

Don't use a <p> tag to mark up something that isn't a paragraph.
You should use the <span> tag (which is a generic inline contar) instead of <p> .

 .dot { height: 12px; width: 12px; background-color: red; border-radius: 50%; display: inline-block; }.red-tag { color: red; font-weight: bold; }

 <div> <span>Online sales this quarter were</span> <span class="dot"></span> <span class="red-tag">HIGH</span> <span>Predictions indicate sales will continue to rise.</span> </div>