Html 使用 TailwindCSS 将徽标放在左上角，将菜单放在右上角

发布于02月19日

我已经设法编写了一些TailWind css来在屏幕的左上角放置一个标志，但现在我似乎无法在右上角获得一个菜单来呈现，这就是我所拥有的.我试过的似乎都不管用.它只会呈现在徽标图像的旁边

<div className="isolate">
    <div className="px-6 pt-6 lg:px-8">
        <div>
            <nav
                className="flex h-9 items-center justify-between"
                aria-label="Global"
            >
                <div
                    className="flex lg:min-w-0 lg:flex-1"
                    aria-label="Global"
                >
                    <a href="/" className="-m-1.5 p-1.5">
                        <span className="sr-only">This Company Name</span>
                        <img
                            className="h-8"
                            src="/this-company-logo.png"
                            alt="This Company Name"
                        />
                    </a>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

推荐答案

<div className="isolate">
  <div className="px-6 pt-6 lg:px-8">
    <nav className="flex items-center justify-between" aria-label="Global">
      <div className="flex-1">
        <a href="/" className="-m-1.5 p-1.5">
          <span className="sr-only">This Company Name</span>
          <img
            className="h-8"
            src="/this-company-logo.png"
            alt="This Company Name"
          />
        </a>
      </div>
      <div className="flex items-center">
        <ul className="flex space-x-4">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>