输入不考虑网格大小

Question

我正在使用 Tailwind 创建一张卡片，里面有表格，但我遇到了输入问题。正如您在图像中看到的，输入最终会溢出并侵入另一个 div 的空间。

我们的想法是将每个字段彼此分开。

<div class="p-24">
  <div class="flex flex-col items-center justify-center w-7/12 px-6 py-8 space-y-10 bg-white shadow-2xl md:w-80 xl:w-72 rounded-2xl">
    <div class="flex flex-col space-y-2">
      <figure class="flex items-center justify-center w-32 h-32 border rounded-full border-chocolate">
        <svg class="opacity-25 w-24 h-24" viewBox='0 0 177 100' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M88 32.5C88 42.165 80.165 50 70.5 50H53V32.5C53 22.835 60.835 15 70.5 15C80.165 15 88 22.835 88 32.5Z' fill='#17CF97'/><path d='M88 67.5C88 57.835 95.835 50 105.5 50H123V67.5C123 77.165 115.165 85 105.5 85C95.835 85 88 77.165 88 67.5Z' fill='#17CF97'/><path d='M53 67.5C53 77.165 60.835 85 70.5 85H88V67.5C88 57.835 80.165 50 70.5 50C60.835 50 53 57.835 53 67.5Z' fill='#17CF97'/><path d='M123 32.5C123 22.835 115.165 15 105.5 15H88V32.5C88 42.165 95.835 50 105.5 50C115.165 50 123 42.165 123 32.5Z' fill='#17CF97'/></svg>
      </figure>
      <div class="text-sm text-center text-chocolate">Choose an avatar</div>
    </div>

    <form action="" class="grid w-11/12 grid-cols-2 gap-4 overflow-hidden">
      <div>
        <label class="block text-sm text-chocolate" for="name">Name</label>
        <input class="border-b border-gray-900" id="name" type="text" />
      </div>

      <div>
        <label class="block text-sm text-chocolate" for="surname">Surname</label>
        <input class="border-b border-gray-900" id="surname" type="text" />
      </div>

      <div>
        <label class="block text-sm text-chocolate" for="birthday">Birth</label>
        <input class="border-b border-gray-900" id="birthday" type="text" />
      </div>

      <div>
        <label class="block text-sm text-chocolate" for="death">Death</label>
        <input class="border-b border-gray-900" id="death" type="text" />
      </div>
    </form>
  </div>
</div>

演示：TailwindPlay

Answer 1

只需添加 100% 的宽度以适应父 div 的宽度 width: 100%;