css - 显示 :flex with text and tag inside removes spaces

Question

这个问题在这里已经有了答案:





Text inside a div positioned with flex linebreaks before and after certain tags

(2 个回答)


4年前关闭。




我正在开发某些 CMS 的广告管理解决方案。我在样式中为管理员提供了几个位置来放置广告。管理员将输入广告代码(在 HTML 中:adsense 脚本、横幅或简单文本)。为了让管理员尽可能轻松，我尝试通过使用以下内容包装广告代码来自动居中内容:

<div style="display: flex; justify-content: center;">
</div>

除了这种情况外，它在所有情况下都能完美运行:

<div style="display: flex; justify-content: center;">
    Hosting provided by <a href="http://foobar">FooBar Hosting</a> and me
</div>

产生这个:



请注意“by FooBar”和“Hosting and”之间缺少空格。这是为什么？有什么办法可以只用 CSS 解决这个问题，但在其他情况下保留居中功能吗？

Answer 1

您可以为 a 标签添加边距。

a {
  margin: 0 3px;
}

<div style="display: flex; justify-content: center;">
    Hosting provided by <a href="http://foobar">FooBar Hosting</a> and me
</div>