如何在導航欄中向右移動串列？在reactjs和css中-有解無憂

我想在我的導航欄中向右移動一個串列，如下圖所示

圖片

我的 navbar.js：課程是 navbar-links

import React from "react";
import "./Navbar.css";

const Navbar = ({ isScrolling, information }) => {
    const toTheTop = () => {
        window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
    };

    return (
        <nav className={`navbar ${isScrolling > 20 ? "scrolling" : null}`}>
            <div
                className={`navbar-logo ${
                    isScrolling > 20 ? "scrolling-logo" : null
                }`}
                onClick={toTheTop}
            >
                <p>{information.name}</p>
            </div>

            <div
                className={`navbar-links box ${
                    isScrolling > 20 ? "scrolling-links" : null
                }`}
            >
                <ul>
                    {information.directions.map((direction) => (
                        <li key={direction.key}>
                            <a href={direction.url}>{direction.name}</a>
                        </li>
                    ))}
                </ul>
            </div>
        </nav>
    );
};

export default Navbar;

我的 Navbar.css：我已經嘗試使用display: flex; align-items: center; justify-content: flex-end;但它不起作用

.navbar {
    display: flex;
    position: fixed;
    top: 0;
    background-color: transparent;
    width: 100%;
    height: 80px;
    font-size: 20px;
    z-index: 1;
}

.scrolling {
    background-color: #000;
    transition: all 0.5s ease;
}

.navbar-logo {
    display: flex;
    align-items: center;
    padding-left: 50px;
    color: #000;
    cursor: pointer;
}

.scrolling-logo {
    color: #fff;
    transition: all 0.5s ease;
}
/* here is the div of my list */
.navbar-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.navbar-links > ul {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.navbar-links > ul > li {
    padding: 0 5% 0 5%;
}

.navbar-links > ul > li > a {
    color: #000;
}

.navbar-links > ul > li > a:hover {
    color: #d4d4d4;
}

.scrolling-links > ul > li > a {
    color: #fff;
    transition: all 0.5s ease;
}

要查看我的專案代碼，請訪問我的存盤庫https://github.com/Michael-Liendo/michaelliendo.com

uj5u.com熱心網友回復：

您可以通過來完成justify-content: space-between;，但現在無法正常作業。
因為你設定position: fixed;而不是設定leftor right。
所以你可以通過這個 CSS 代碼來完成。

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    width: 100%;
    height: 80px;
    font-size: 20px;
    z-index: 1;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/358604.html

標籤：javascript html css 反应

上一篇：如何更改整個磁區中的文本框大小？

下一篇：在try/catch塊中功能完成之前的document.save()和res.redirect