顺风之间的对齐对其他文件起作用，但对我当前正在处理的文件不起作用

Question

这是顺风给我的输出，而不是：

这是我当前正在处理的日历样式的代码块。

<!--The section is not working -->

中的代码块不起作用。我尝试使用开发者控制台，但我不明白我做错了什么。

<!-- Calendar Section Start -->
<section class="pt-24">
  <div class="flex">
    <div
      class="calendar-container mx-10 my-5 rounded-md border border-black py-10"
    >
      <div class="appointment-counselor-container mx-5 flex justify-between">
        <div class="text-2xl font-semibold text-green-700">
          <h1>Appointments</h1>
        </div>
        <!-- Counselor toggle -->
        <div class="relative select-none">
          <!--The section is not working -->
          <div
            id="counselor-lists"
            class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white"
          >
            <div class="my-auto">
              <h1 id="selected-counselor">Counselor 1</h1>
            </div>
            <div class="text-lg">
              <p>&#8744;</p>
            </div>
          </div>

          <div
            id="dropdown-options"
            class="absolute left-0 top-full mt-2 hidden w-full rounded border border-black bg-white"
          >
            <div
              class="cursor-pointer px-4 py-2 hover:bg-green-400"
              data-value="counselor1"
            >
              Counselor 1
            </div>
            <div
              class="cursor-pointer px-4 py-2 hover:bg-green-400"
              data-value="counselor2"
            >
              Counselor 2
            </div>
            <div
              class="cursor-pointer px-4 py-2 hover:bg-green-400"
              data-value="counselor3"
            >
              Counselor 3
            </div>
            <div
              class="cursor-pointer px-4 py-2 hover:bg-green-400"
              data-value="counselor4"
            >
              Counselor 4
            </div>
          </div>
        </div>

        <!-- Counselor toggle end -->
      </div>

      <div class="pick-paragraph mx-5 my-2">
        <p class="text-base text-green-800">
          Pick a date and time for an appointment.
        </p>
      </div>

      <div class="month-button-container mx-5 my-3 flex justify-between">
        <div class="my-auto text-green-800">
          <h1 id="month-year" class="text-2xl font-semibold"></h1>
        </div>
        <div class="month-button-wrapper flex text-2xl text-white">
          <div
            class="less-than-button my-auto cursor-pointer rounded px-5 py-2"
            id="prev"
          >
            <h1>&lt;</h1>
          </div>
          <div
            class="greater-than-button my-auto ml-2 cursor-pointer rounded px-5 py-2"
            id="next"
          >
            <h1>&gt;</h1>
          </div>
        </div>
      </div>
      <div class="bg-berde grid grid-cols-7 text-white">
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Sun
        </div>
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Mon
        </div>
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Tue
        </div>
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Wed
        </div>
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Thu
        </div>
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Fri
        </div>
        <div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
          Sat
        </div>
      </div>
      <div
        class="my-2 grid cursor-pointer grid-cols-7 text-center text-xl font-semibold"
        id="days"
      ></div>
    </div>
  </div>
</section>
<!-- Calendar Section End -->

这是不起作用的代码块：

<div
  id="counselor-lists"
  class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white"
>
  <div class="my-auto">
    <h1 id="selected-counselor">Counselor 1</h1>
  </div>
  <div class="text-lg">
    <p>&#8744;</p>
  </div>
</div>

此代码在其他文件中有效，但在本文件中无效。为什么

justify-between

在此文件中不起作用？

Answer 1

您指出的代码块实际上有效，问题不在于

justify-between

。它的宽度没有扩展的原因是它间接位于弹性容器内。在 Flex 容器内时，如果不向子元素添加

flex-grow

，它们将缩小到内容大小。所以解决方案非常简单：在 Tailwind 中，您只需要将

grow

添加到子元素即可。

<script src="https://cdn.tailwindcss.com"></script>

<div class="calendar-container mx-10 my-5 rounded-md border border-black bg-green-400 py-10">
  <div class="appointment-counselor-container mx-5 flex justify-between">
    <div class="text-2xl font-semibold text-green-700">
      <h1>Appointments</h1>
    </div>
    <!-- Counselor toggle -->
    <div class="relative select-none grow">
      <!-- This section now works because the parent container adds `grow` -->
      <div id="counselor-lists" class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white">
        <div class="my-auto">
          <h1 id="selected-counselor">Counselor 1</h1>
        </div>
        <div class="text-lg">
          <p>&#8744;</p>
        </div>
      </div>
      <!-- Counselor toggle end -->
    </div>
  </div>
</div>

这是一个更适合您的设计的示例：

<script src="https://cdn.tailwindcss.com"></script>

<div class="calendar-container mx-10 my-5 rounded-md border border-black bg-green-400 py-10">
  <div class="appointment-counselor-container mx-5 flex gap-4">
    <div class="text-2xl font-semibold text-green-700">
      <h1>Appointments</h1>
    </div>
    <!-- Counselor toggle -->
    <div class="relative grow select-none">
      <!-- This section now works because the parent container adds `grow` -->
      <div id="counselor-lists" class="bg-berde ml-auto flex max-w-64 cursor-pointer items-center justify-between rounded bg-green-700 px-4 py-1 text-white">
        <div class="my-auto">
          <h1 id="selected-counselor">Counselor 1</h1>
        </div>
        <div class="text-lg">
          <p>&#8744;</p>
        </div>
      </div>
      <!-- Counselor toggle end -->
    </div>
  </div>
</div>

Tailwind Play演示。