使用TailwindCSS的导航栏中全高元素的问题

时间：2019-10-05 10:33:23

标签： css layout flexbox navbar tailwind-css

我遇到麻烦了，因为我是CSS和flexbox的新手。

我正在尝试使用令人惊叹的TailwindCSS创建导航栏，但是我需要在导航栏中垂直放置链接，并在导航栏中background-color全高。

我在做什么错了？

https://codesandbox.io/s/tailwindcss-navbar-sgpie

image

我为父母尝试了items-center，为物品尝试了self-center，仍然是问题。

1 个答案:

答案 0 :(得分：0)

请尝试在bg-green-400中使用您的类<nav>而不是bg-white，并从bg-green-400中删除<a>，以了解更多信息，请参考下面的代码片段。 / p> 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link href="./index.css" rel="stylesheet" />
  </head>

  <body class="bg-blue-600">
    <nav class="bg-green-400">
      <div class="container flex">
        <a class="bg-red-400 text-3xl p-4">Project name</a>
        <div class="flex items-center">
          <a class="p-2">Link</a>
          <a class="p-2">Link</a>
          <a class="p-2">Link</a>
          <a class="p-2">Link</a>
        </div>
      </div>
    </nav>
  </body>
</html>

谢谢...

相关问题
最新问题