Question 236675 in Html Question posted in
Some basic documentation can be found here.

Html – Spacing of elements in Navbar – Tailwind CSS

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search