为什么每个词都在单独的一行中？

Question

我有一个问题，很奇怪，我以为我已经完成了一个任务，但我正在玩浏览器然后砰的一声，一个问题，所以我有一个带有 flex 显示的容器，它包含链接元素，每个元素有文本，但是现在，文本显示不正确，我不知道为什么，是因为 parent 的 flex 显示吗？我不知道，这是我想要实现的目标：

但这就是我得到的：

[![在此处输入图片描述][2]][2]

我不明白 return，为什么？

这是我的 html 代码：

    <div class="header__options">
        <a href="#" onclick="showDetails(0)">
            Dernières minutes
        </a>
        <a href="#" onclick="showDetails(1)">
            Vol
        </a>
        <a href="#" onclick="showDetails(2)">
            Séjour
        </a>
        <a href="#" onclick="showDetails(3)">
            Location
        </a>
        <a href="#" onclick="showDetails(4)">
            Camping
        </a>
        <a href="#" onclick="showDetails(5)">
            Hôtel
        </a>
        <a href="#" onclick="showDetails(6)">
            Train
        </a>
    </div>

还有我的css：

.header__options a {

    margin-right: 20px;
    position: relative;

    font-size: 14px;

    text-decoration: none;

    color: #ffffff;
    font-family: Arial, sans-serif;
}

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 CSS:

white-space: nowrap;

更多信息：https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space

Answer 2

添加 white-space: nowrap 将确保元素文本不换行，并保持在一行。

.header__options {
  background: black;
}
.header__options a {
  margin-right: 20px;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  font-family: Arial, sans-serif;
  
  /* Add white-space: nowrap */
  white-space: nowrap;
}

<div class="header__options">
    <a href="#" onclick="showDetails(0)">
        Dernières minutes
    </a>
    <a href="#" onclick="showDetails(1)">
        Vol
    </a>
    <a href="#" onclick="showDetails(2)">
        Séjour
    </a>
    <a href="#" onclick="showDetails(3)">
        Location
    </a>
    <a href="#" onclick="showDetails(4)">
        Camping
    </a>
    <a href="#" onclick="showDetails(5)">
        Hôtel
    </a>
    <a href="#" onclick="showDetails(6)">
        Train
    </a>
</div>

为什么每个词都在单独的一行中？

Why each word is in a separate line?

html

css

inline

text-styling