时间戳

首页 > 解决方案 > CSS - 在句子中使用多个 CSS 类

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

问题描述

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

我正在尝试使用不同的 css 类写一个句子。目前，我在让它们保持一致时遇到问题。我期待这句话的结果在一句话中流动，就像：

本季度的在线销售额（css dot）很高。预测表明销售额将继续上升。

目前，添加.dot标签后；它显示在下面的行中，由于 inline 块，它会影响它后面的句子。我正试图把它全部放在一条线上。我已经尝试通过将我的句子包装在div标签中来实现这一点；以及切换<span class="dot">到<div class="dot"/>哪个最终给了我相同的结果。

标签： htmlcss

解决方案

不要使用<p>标签来标记不是段落的内容。
您应该使用<span>标签（这是一个通用的内联 contar）而不是<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>

推荐阅读