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 回答