使用css flexbox缺少链接和paragrath之间的差距[重复]答案

【问题标题】：Gap between link and paragrath missing using css flexbox [duplicate]使用css flexbox缺少链接和paragrath之间的差距[重复]
【发布时间】：2019-08-23 20:51:01
【问题描述】：

我第一次使用 css flexbox，我正在为我的页脚创建一个带有链接的段落，即

<p class="footer--credit">link 2 <a href="#">company</a>.</p>

Flexbox 以某种方式消除了链接 2 之后的间隙，请参见此处

body{
  background: red;
}.footer__contents {
    width: 100vw;
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: $white;
    background:pink;
}
a {
        color: $orange;
        text-decoration: none;
}
p {
        display: flex;
        align-items: center;
        justify-content: center;
}

<div class="footer__contents">
  <p class="footer--credit">link 2 <a href="#">company</a>.</p>
  <p class="footer--credit">link 1 <a href="#">company</a>.</p>
</div>

有什么想法吗？

【问题讨论】：

请考虑阅读副本中的所有答案，以了解为什么没有差距以及为什么不应该以这种方式使用 flexbox
您已经在使用 CSS 网格，因此请删除 p 中的所有内容，然后将其添加到 margin: auto; 到中心

标签： html css flexbox

【解决方案1】：

您可以通过在a CSS 中添加margin-left: 5px; 来解决此问题。

a {
    color: $orange;
    text-decoration: none;
    margin-left: 5px;
}

另一个可以使用空格的选项HTML Entities。

HTML 实体参考链接 - https://www.w3schools.com/html/html_entities.asp

<div class="footer__contents">
  <p class="footer--credit">link 2&nbsp;<a href="#">company</a>.</p>
  <p class="footer--credit">link 1&nbsp;<a href="#">company</a>.</p>
</div>

body{
  background: red;
}.footer__contents {
    width: 100vw;
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: $white;
    background:pink;
}
a {
        color: $orange;
        text-decoration: none;
        margin-left: 5px;
}
p {
        display: flex;
        align-items: center;
        justify-content: center;
}

<div class="footer__contents">
  <p class="footer--credit">link 2 <a href="#">company</a>.</p>
  <p class="footer--credit">link 1 <a href="#">company</a>.</p>
</div>

【讨论】：

【解决方案2】：

添加white-space: pre-wrap;

body{
  background: red;
}.footer__contents {
    width: 100vw;
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: $white;
    background:pink;
}
a {
        color: $orange;
        text-decoration: none;
}
p {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: pre-wrap;
}

<div class="footer__contents">
  <p class="footer--credit">link 2 <a href="#">company</a>.</p>
  <p class="footer--credit">link 1 <a href="#">company</a>.</p>
</div>

【讨论】：

天啊，我想不通，但我知道这很愚蠢。谢谢。
@Dan 这是一个 hack，添加换行符或更多空格，你会遇到更多问题 (jsfiddle.net/3cf9ru0d / jsfiddle.net/3cf9ru0d/2)
@TemaniAfif 你有解决办法吗？
@Dan 用所需的解决方案添加了 2 个重复项 .. 您不必将 flexbox 与文本容器一起使用（这是另一个问题：jsfiddle.net/3cf9ru0d/4） .. flexbox 不是所有事情的自动解决方案.