导航栏容器未使用全长答案

【问题标题】：Navbar container not using full length导航栏容器未使用全长
【发布时间】：2021-06-11 10:34:19
【问题描述】：

我一直在关注使用 React 创建 Web 应用程序的教程，但是在创建导航栏时，由于某种原因容器没有使用完整长度...我尝试了几件事，但似乎找不到适当的解决方案。

这是导航栏和容器的 CSS：

.navbar {
    background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
    height: 80px;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  
  .navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100%;
  }

这是我不知道的容器周围的盒子：

欢迎任何帮助，css 显然不是我的强项...

import React,{ useState } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button.js';

function Navbar() {
    const [click, setClick] = useState(false);
    const [button, setButton] = useState(true);

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false);
    const showButton = () => {
        if (window.innerWidth <= 960) {
            setButton(true);
        } else {
            setButton(false);
        }
        };

    window.addEventListener('resize', showButton);

    return (
        <>
            <nav className="navbar">
                <div className="navbar-container">
                    <Link to="/" className="navbar-logo">
                        ZYGO <i class="fas fa-dice-d20"></i>
                    </Link>
                    <div className='menu-icon' onClick={handleClick}> 
                        <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
                    </div>
                    <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li className='nav-item'>
                            <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                                Home
                            </Link>
                        </li>
                        <li className='nav-item'>
                            <Link to='/simulations' className='nav-links' onClick={closeMobileMenu}>
                                Simulations
                            </Link>
                        </li>
                        <li className='nav-item'>
                            <Link to='/about' className='nav-links' onClick={closeMobileMenu}>
                                About
                            </Link>
                        </li>
                        {/* <li className='nav-item'>
                            <Link to='/sign-up' className='nav-links' onClick={closeMobileMenu}>
                                Sign Up
                            </Link>
                        </li> */}
                    </ul>
                    {/* {button && <Button buttonStyle='btn--outline'>ABOUT</Button>} */}
                </div>
            </nav>
        </>
    );
}

export default Navbar

【问题讨论】：

如果您也提供了 JSX，可能会很有用。为哪个类提供上下文
@JudeBobinihi 添加了导航栏 jsx
@Nico 请用这个来显示你的输出：codesandbox.io你也可以尝试任何对你有用的东西。
对于初学者，删除 .navbar 中的 justify-content 和 align-items。无关的

标签： css containers alignment navbar

【解决方案1】：

出于某种原因，您将 navbar 设置在 navbar-container 之外？可以换这两个吗？我猜容器应该包含导航栏，并且在该类上设置的 css 的宽度设置为 100%。

但是由于导航栏没有设置宽度，它只占用它需要的空间。

【讨论】：