Flexbox 子项没有声明内边距

Answer 1

您可以考虑将

flex-basis: 0; flex-grow: 1

应用于

<p>

元素。这意味着按钮的网格容器将在其宽度上“优先”。这允许其按钮保持其自然宽度。然后，任何剩余的父级水平空间将由

<p>

元素填充：

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

<div class="w-full flex gap-0.5 items-center justify-between p-10">
  <p class="basis-0 grow">Wie möchten Sie ihre Antwort erhalten?</p>
  <div class="grid grid-cols-2 gap-1.5">
    <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white">
      E-Mail
    </div>
    <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none">
      Telefon
    </div>
  </div>
</div>

<div class="max-w-md w-full flex gap-0.5 items-center justify-between p-10">
  <p class="basis-0 grow">Wie möchten Sie ihre Antwort erhalten?</p>
  <div class="grid grid-cols-2 gap-1.5">
    <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white">
      E-Mail
    </div>
    <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none">
      Telefon
    </div>
  </div>
</div>

Answer 2

填充没问题，但是

width

(47.8) 的值是固定的，并且 2 个按钮上的 2 的值相同 你可以这样做：

<div
  class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none"
  style="width: fit-content;"
  >
  Telefon
</div>