看不见红色背景的跨度？

问题描述 投票：0回答：2

我有一个元素列表，我试图显示它们，如果单击其中一个元素，字体的权重更改为粗体，并添加装饰（下划线），则uderline的粗细为3px，因此要做到我在链接元素中添加了一个跨度，将链接设置为相对，并将跨度设置为绝对，并添加了其他样式，例如：（请转到标题选项）

<div class="header__top-bar">
            <div class="header__logo-icons">
                <img class="header__logo" src="assets/images/cdiscountvoyage-trimmy.png" alt="logo">
                <div class="header__icons-container">
                    <a href="#">
                        <img src="assets/images/facebook.png" alt="facebook">
                    </a>
                    <a href="#">
                        <img src="assets/images/instagram.png" alt="facebook">
                    </a>
                    <a href="#">
                        <img src="assets/images/pinterest.png" alt="facebook">
                    </a>
                </div>
            </div>
            <div class="header__options">
                <a href="#">
                    <span style="display: inline-block;">Séjour</span>
                    <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
                </a>
                <a href="#">
                        <span style="display: inline-block;">Séjour</span>
                        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
                </a>

                <a href="#">
                        <span style="display: inline-block;">Séjour</span>
                        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
                </a>
            </div>
        </div>

这里是样式（我想是什么）：

.header__options {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 5px;
}

.header__options a {

    margin-right: 20px;
    position: relative;

    font-size: 14px;

    text-decoration: none;

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

.header__options a:last-child {
    margin-right: 0;
}

现在，我并没有强迫js代码查看click事件，我不仅看到了我添加的下划线效果，所以这里就是我所拥有的：

enter image description here

但是当我检查我的元素时，我看到它在那里，但不可见，就像它具有负的z-index或其他值，标题背景隐藏了它，但我不确定。

enter image description here

这是我想要的模型：

enter image description here

任何帮助将不胜感激。

html css position
2个回答
0
投票

[当我运行这段代码时，删除x-overflow: scroll;似乎可行，并且可以看到下划线。

[另外，请考虑将伪元素（::after，::before）用于此类情况。它们将使您的生活更轻松，代码更干净。

此外，如果不确定为什么看不到元素，请尝试将其移动。更改z-index。更改它的position和display属性。这些只是调试此类错误的简便方法。

0
投票

将padding-bottom添加到。header__options类。在此之后，我认为您可以看到下划线。

.header__options {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 5px;
    background: darkblue;
    padding-bottom: 10px; /* added pading bottom to get space in bottom */
}

.header__options a {

    margin-right: 20px;
    position: relative;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.header__options a:last-child {
    margin-right: 0;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="header__options">
    <a href="#">
        <span style="display: inline-block;">Séjour</span>
        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
    </a>
    <a href="#">
        <span style="display: inline-block;">Séjour</span>
        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
    </a>

    <a href="#">
        <span style="display: inline-block;">Séjour</span>
        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
    </a>
</div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.