Question

我使用下面的<p>，但它导致</p>

之后的文本之间存在差距

<p class="tick">✓</p> Post messages to friends all over the world.

CSS：

.tick {
  font-size: 12px;
  color: green;
  font-weight: bold;
  line-height: normal 
}

这就是它的样子：

✓

向世界各地的朋友发布消息。

但我希望所有这一切都在同一条线上。

有什么想法吗？

Answer 1

显示：内联;会做的。

.tick { 
  display: inline;
  font-size: 12px;
  color: green;
  font-weight: bold;
  line-height: normal;
}

但我认为更好的方法是使用自定义li项目符号在无序列表中执行此操作。

Answer 2

vegijtha的答案有效，但你不应该在这里使用p-tag。它们具有文本段落的语义含义 - 改为使用span-tag。

<span class="tick">✓</span> Post messages to friends all over the world.

Answer 3

第一个例子是你最初的条目 - 不好。在第二个例子中，我将文本放在p标签内，以便它们正确对齐。

<p class="tick">✓ Post messages to friends all over the world.</p>

如果您不想将文本放在p标签内，只需为内联块添加一个css规则，或者只使用内联显示属性。

display: inline-block;

祝你好运！