显示块不移动到下一行

Posted 2023-03-06

【中文标题】显示块不移动到下一行

【英文标题】：Display Block not moving to next line

【发布时间】：2021-06-28 19:53:18

【问题描述】：

我正在尝试制作一个顺风的响应式导航栏。当我打开导航菜单时，我想在每行中列出我的导航链接和单个项目。现在，他们都排成一排。我正在使用顺风：

function Navbar() 
  const [isOpen, setIsOpen] = useState(false);
  return (
    <header>
      <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
        <div className="p-4 flex flex-row items-center justify-between">
          <Link href="/">
            <a className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
              Header
            </a>
          </Link>
          <button
            className="md:hidden rounded-lg focus:outline-none focus:shadow-outline"
            onClick=() => 
              setIsOpen(!isOpen);
            
          >
            Menu
          </button>
        </div>

        <nav className=isOpen ? "flex" : "md:flex hidden">
          <NavLink pathTo="/" displayText="Home" />
          <NavLink pathTo="/" displayText="Page 1" />
          <NavLink pathTo="/" displayText="Page 2" />
        </nav>
      </div>
    </header>
  );


export default Navbar;

我的 NavLink 组件如下：

import React from "react";
import Link from "next/link";
interface NavItem 
  pathTo: string;
  displayText: string;

function NavLink(item: NavItem) 
  return (
    <Link href=item.pathTo>
      <a className="block lg:p-4 px-4 py-2 mt-2 border-b-2 border-white text-sm bg-transparent dark-mode:bg-transparent dark-mode:hover:border-red-400 dark-mode:focus:border-red-400 dark-mode:focus:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:border-red-400 focus:border-red-400">
        item.displayText
      </a>
    </Link>
  );


export default NavLink;

我错过了什么？从菜单打开时，我希望 NavLinks 在每一行上都有一个项目。我以为display:block 会这样做，但似乎不会。这是为什么呢？

【问题讨论】：

我想说这是因为 navlink 容器的 flex 方向。你在使用列 flex-direction 吗？

是的，我是。 @rtkay123 似乎也在同一轨道上。我需要添加flex-col。但是现在打开的菜单在打开时会向下移动所有内容。如何让它出现在屏幕上的项目上方，而不是顶部？

使用菜单的位置属性可以工作。为了确保它保持在您想要的水平之上，还要编辑菜单的 z-index。

【参考方案1】：

您需要在导航链接中添加弹性方向。添加flex-col 应该可以解决问题。