主页 / 问题 / 1539455
Accepted
Elijah_Pris
Asked:2023-09-07 14:47:49 +0800 CST2023-09-07 14:47:49 +0800 CST

如何对齐 navbare 中的元素

  • 772

我正在尝试根据 YouTube 上的以下视频制作一个导航栏：https://www.youtube.com/watch? v=a3rofqqrTBE&ab_channel=OnlineTutorials，用于我也从 YouTube 下载的简历（现在我认为很明显，我我是新手，不太明白）

要点是白色元素（指定白色用于对比）又名指示器与所有其他元素一起绘制，但与它们的位置不一致。

在此输入图像描述

在此输入图像描述

这是负责这个动画的代码片段

导航栏.jsx

<div className="Nav_container">
    <div className="logo">
        <img src={LogoGif} alt="my-gif" />
    </div>
    <div className="icons" >
        <ul className="nav_links">
            {navLinks.map((navlink, index) => {
                return <li class="list active" key={index}>
                <div class="indicator"></div>
                <a href={`#${navlink.links}`}>{navlink.icons}
                    <span class="text">{navlink.links}</span>
                </a>
                </li>
            })}
        </ul>
    </div>
</div>

导航栏.scss

.nav_links {
    display: flex;
    list-style: none;
    max-height: 50px;

    li {
        margin-left: 3rem;

        @media screen and (max-width: 800px){
            display: none;
        }
        &:hover {
            .text {
                opacity: 1;
                transform: translateY(-10px); 
                background: rgb(66,66,66);
                padding: 2px 7px;
                border-radius: 12px;
            }
            svg {
                opacity: 1;
                transform: translateY(30px);
            }
            .indicator {
                transform: translateY(30px);
            }
        }
        .indicator {
            top: 0px;
            border: 6px solid rgba(0,0,0,0.0);
            border-radius: 50%;
            position: absolute;
            width: 70px;
            height: 70px;
            background: rgb(29,31,35);
            background-color: #fff;
            transition: 0.4s;
        }
        .indicator::before {
            content: '';
            position: absolute;
            top: 34px;
            left: 58px;
            width: 30px;
            height: 30px;
            background: transparent;
            border-radius: 50%;
            box-shadow: -14px -16px white;
        }
        .indicator::after {
            content: '';
            position: absolute;
            top: 34px;
            left: -30px;
            width: 30px;
            height: 30px;
            background: transparent;
            border-radius: 50%;
            box-shadow: 14px -16px white;
        } 
        a {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 100%;
            text-align: center;
            text-decoration: none;
            transition: 0.5s;
            color: #fff;
            text-transform: uppercase;
            font-weight: 100;
            &:hover {
                opacity: 1;
            }
        }
        .text {
            font-size: 0.8em;
            opacity: 0;
            margin-top: -25px;
            transition: 0.5s;
            letter-spacing: 0.1em;
        }
        svg {
            display: block;
            font-size: 2em;
            transition: 0.7s;
        }
    }
}

需要添加什么来移动指示器的位置与其余元素一致（我认为很明显，图标和文本在同一水平上对齐，只有指示器被移动）

html

1 个回答

  1. Best Answer

    添加width: 70px;到您的li。

    .nav_links {
    ...
    li {
        width: 70px;
        ...
    }
}

    结果： 结果

    Ps我建议你仔细重新观看视频并正确重写样式。正因为如此，我发现了与你的风格不一致的地方之一。您还可以使用浏览器中的开发人员工具。还将.gitignore文件添加到React应用程序所在的文件夹中，至少使用node_modules. 因此，在克隆存储库时，您不必下载所有模块。

    • 1

相关问题