Html - Spacing of elements in Navbar - Tailwind CSS

jrdaz14
August 24, 2023
187 views
0 votes
2 Answers

<div class="flex bg-black h-12 items-center space-x-11">
      <nav class="">
        <span>
          <a
            class="text-white text-3xl font-bold hover:text-gray-300 hover:underline"
            href="#"
            >Corner Hair Salon</a
          >
        </span>
        <span>
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Home</a
          >
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >About</a
          >
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Appointments</a
          >
        </span>
        <span>
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Sign-In</a
          >
        </span>
      </nav>
    </div>

photo of my webpage

I’m new to web development, and I’m using tailwind to design my webpage – I want to space apart the elements in my navbar, such that ‘Corner Hair Salon’ is aligned left, ‘Home’-‘Appointments’ is centered, and ‘Sign-In’ is aligned right. I still can’t figure out how to structure my HTML/CSS to get that result – any help is appreciated.

Answers

The justify-between class on the span.flex element will space out the navbar items evenly.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex bg-black h-12 items-center space-x-11">
  <nav class="flex">
    <span class="text-white text-3xl font-bold hover:text-gray-300 hover:underline">
      <a href="#">Corner Hair Salon</a>
    </span>
    <span class="flex justify-between">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Appointments</a>
    </span>
    <span class="text-white text-3xl font-bold hover:text-gray-300 hover:underline">
      <a href="#">Sign-In</a>
    </span>
  </nav>
</div>

Add following classes to nav flex justify-between w-full

<nav class="flex justify-between w-full">

The nav bar is not getting proper width and because of that flex property is also not satisfying the result. And flex property should be applied to parent element which has immediate children items on which flex needs to be applied.

You can learn more about flexbox from CSS Tricks site.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex bg-black h-12 items-center space-x-11">
  <nav class="flex justify-between w-full">
    <span>
      <a class="text-white text-3xl font-bold hover:text-gray-300 hover:underline" href="#">Corner Hair Salon</a>
    </span>
    <span>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Home</a>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">About</a>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Appointments</a>
    </span>
    <span>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Sign-In</a>
    </span>
  </nav>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Spacing of elements in Navbar – Tailwind CSS

Answers