目前我正在從事類似的工作 例子

目標是讓bg-blue-500(第二個分區(qū))位于bg-gray-100(第一個分區(qū))的內(nèi)部，準確地位于中心，虛線位于bg-blue-500的外部，但也能夠讓保持249.00美元價格的跨度獨立于概念，即如果我想讓內(nèi)容更大，移動它不會對虛線產(chǎn)生負面影響。

這是當(dāng)前的代碼

<!--High / Low -->
          <div
            class="
              flex
              h-3
              my-8
              mr-8
              bg-gray-100
              border
              dark:bg-gray-700
              rounded-md
            "
          >
            <span class="bg-blue-500 bg-opacity-70  w-4/6 ml-10">
              <div class="grid grid-cols-2 text-xs">
                <div class="place-self-start flex flex-col">
                  <span
                    class="
                      border-dashed border-2 border-gray-300
                      pt-10
                      mt-2.5
                      w-1
                      self-center
                    "
                  ></span>
                  <span>$249.99</span>
                </div>
                <div class="place-self-end flex flex-col">
                  <span
                    class="
                      border-dashed border-2 border-gray-300
                      pt-10
                      mt-2.5
                      w-1
                      self-center
                    "
                  ></span>
                  <span class="border rounded p-5">$249.99</span>
                </div>
              </div>
            </span>
          </div>
          <!--High / Low-->

https://play.tailwindcss.com/d4BkNiESRE上面的代碼的工作示例

您可以考慮對頂級應(yīng)用justify-content:center & lt；div & gt使居中。bg-blue-500。要使虛線與藍色條的兩端對齊，請應(yīng)用transform: translateX()并移動其寬度的50%。減去破折號的寬度，使邊緣對齊。

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

<div
  class="
    flex
    justify-center
    h-3
    my-8
    mr-8
    bg-gray-100
    border
    dark:bg-gray-700
    rounded-md
  "
>
  <span class="bg-blue-500 bg-opacity-70  w-4/6 ml-10">
    <div class="grid grid-cols-2 text-xs">
      <div class="place-self-start flex flex-col -translate-x-[calc(50%-(theme(spacing.1)/2))]">
        <span
          class="
            border-dashed border-2 border-gray-300
            pt-10
            mt-2.5
            w-1
            self-center
          "
        ></span>
        <span>$249.99</span>
      </div>
      <div class="place-self-end flex flex-col translate-x-[calc(50%-(theme(spacing.1)/2))]">
        <span
          class="
            border-dashed border-2 border-gray-300
            pt-10
            mt-2.5
            w-1
            self-center
          "
        ></span>
        <span class="border rounded p-5">$249.99</span>
      </div>
    </div>
  </span>
</div>