0

我有一个问题，很奇怪，我以为我已经完成了一项任务，但是我在玩浏览器然后就繁荣了，一个问题，所以我有一个带有 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;
}

任何帮助将非常感激。

4

2 回答 2

3

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

于 2020-05-13T12:51:09.597 回答
1

您可以使用 CSS：

white-space: nowrap;

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

于 2020-05-13T12:45:11.403 回答