Проблемы с элементами полной высоты в navbar с использованием TailwindCSS - PullRequest
Новая
       49

Проблемы с элементами полной высоты в navbar с использованием TailwindCSS

0 голосов
/ 05 октября 2019

У меня проблемы, потому что я новичок в CSS и flexbox.

Я пытаюсь создать навигационную панель с потрясающим TailwindCSS, но мне нужны ссылки вертикально по центру и background-color на полную высотув navbar.

Что я делаю не так?

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

image

Я пытался items-center для родителей и self-center для предметов, все еще проблема.

1 Ответ

0 голосов
/ 05 октября 2019

, пожалуйста, попробуйте использовать ваш класс bg-green-400 в <nav> вместо bg-white и удалите bg-green-400 из <a>, для большего понимания, пожалуйста, обратитесь к приведенному ниже фрагменту. 

<!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>

Спасибо ...

...