为什么每个单词都在一个单独的行中？ [复制]答案

【问题标题】：Why each word is in a separate line? [duplicate]为什么每个单词都在一个单独的行中？ [复制]
【发布时间】：2020-08-29 15:59:15
【问题描述】：

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

但这就是我得到的：

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

我没有得到回报，这是为什么呢？

这是我的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;
}

任何帮助将不胜感激。

【问题讨论】：

您期望什么行为？不清楚你在问什么，特别是因为你没有展示所有相关的 CSS。请修复您的图片降价。
好吧，两个人回答了，他们是正确的，它有效，所以他们理解了这个问题，并回答了正确的问题，所以我认为先生很清楚我在问什么
因为默认情况下所有文本都换行，所以不是。此外，如何防止文本换行的问题已经回答了数百次，所以你没有找到解决方案很奇怪。

标签： html css inline text-styling

【解决方案1】：

添加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>

【讨论】：

【解决方案2】：

您可以使用 CSS：

white-space: nowrap;

【讨论】：