如何将我的导航栏从一行升级为两行？

Question

最近我正在开发一个网站，其导航栏如下所示

但是我想将导航栏更改为这个

我自己尝试过使用填充和边距，但不知何故它不起作用并且根本没有响应，所以我如何才能使导航栏像图2中那样？请帮忙

Answer 1

您可以使用flexbox。

在标题的 CSS 中，放置

display: flex;

将其转换为弹性容器，然后放置

flex-direction: column;

以使其显示一个在另一个之上的元素。

现在，在标题内创建两个 div — 一个包含上部的元素，另一个包含底部的元素 — 然后将您想要的元素放在第一个 div 中，将所需的元素放在第二个 div 中。

HTML 示例：

<header>
  <div>
    <input class="search">
    <img class="logo">
    <button>Sign-in</button>
    <button>Cart</button>
    <button>Wishlist</button>
  </div>

  <div>
    <a href="/">Home</a>
    <a href="/products">Shop</a>
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
    <a href="/contact">Contact</a>
  </div>
</header>