使用 <p> 的 CSS Flexbox 格式 [重复]答案

【问题标题】：CSS Flexbox formatting with <p> [duplicate]使用 <p> 的 CSS Flexbox 格式 [重复]
【发布时间】：2020-02-22 19:17:43
【问题描述】：

我有following jsfiddle：

.links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-style: normal;
}

<html>

<body>
  <address class="links">
    <p>
    Jeremy is on:
    </p>
    <a href="https://www.linkedin.com/">
      LinkedIn
    </a>
    <a href="https://stackoverflow.com/users/5889131/jeremysprofile">
      Stack Overflow
    </a>
  </address>
</body>

</html>

输出如下：

              LinkedIn Stack Overflow
Jeremy is on:

我不明白为什么。我希望所有元素都在同一行（或者后面的元素包裹在下面，而不是第一个元素）。

我注意到这种情况发生在 <p> 或 <h1> 标记上，而不是在“Jeremy is on”行上的 <div> 标记上。我查看了<p> 和<div> 的默认CSS 设置，但没有看到任何明显的东西。我尝试使用 .p { margin: none; display: inline-flex;} 进行一些 CSS 更改，但没有任何影响。

为什么会在链接下方放置<p> 标记，而不会放置<div> 标记？在本节中，我可以应用哪些 CSS 规则来使 <p> 标记的行为类似于 <div> 标记？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您的 CSS 中有一些错误。当您的意思是直接引用元素p 时，您引用了.p 类。此外，none 是 margin 属性的无效值。无效的margin 值是p 出现在链接下方的原因。这是因为 margin 没有像您预期的那样被删除。

改变这个：

.p {
  margin: none;
  display: inline-flex;
}

到这里：

p {
  margin: 0;
}

另外，为了使项目填满整行的格式更好，我会将inline-flex 更改为flex：

.links {
  display: flex;
  …
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-style: normal;
}

p {
  margin: 0;
}

<address class="links">
  <p>Jeremy is on:</p>
  <a href="https://www.linkedin.com/">
    LinkedIn
  </a>
  <a href="https://stackoverflow.com/users/5889131/jeremysprofile">
    Stack Overflow
  </a>
</address>

jsFiddle

【讨论】：

【解决方案2】：

最简单的解决办法是将

改为

如果你想在 CSS 中使用它，你需要删除 .从 p 样式，因为这是在寻找一个名为 p 的类而不是元素，“none”对边距无效，您需要将其更改为“unset”或 0

【讨论】：