如何：使用 Tailwind CSS 的全角选择元素答案

【问题标题】：How to: Fullwidth select element with Tailwind CSS如何：使用 Tailwind CSS 的全角选择元素
【发布时间】：2021-09-16 20:52:52
【问题描述】：

使用 Tailwind CSS，如何让选择元素拉伸其包含元素的整个宽度？这是我的代码：

<div class="grid grid-cols-12 gap-4">

<!-- left column -->
<div class="col-span-3 bg-gray-100 px-2 py-4">
    <label for="testSelect">Select a Type</label>
    <select id="testSelect" class="block w-max">
        <option value="1" class="block w-max" selected>Test 1</option>
        <option value="2" class="block w-max">Test 2</option>
    </select>
</div>

</div>

控制台显示显示被设置为在选择元素上阻塞，但它仍然只占用选项内容所需的宽度。

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

请使用flex 和w-full 类。

<div class="grid grid-cols-12 gap-4">
  <!-- left column -->
  <div class="col-span-3 bg-gray-100 px-2 py-4">
    <label for="testSelect">Select a Type</label>
    <select id="testSelect" class="flex w-full"> <!-- From block  -->
      <option value="1" class="block w-full" selected>Test 1</option> <!-- From w-max -->
      <option value="2" class="block w-full">Test 2</option> <!-- From w-max -->
    </select>
  </div>
</div>

顺风游乐场： https://play.tailwindcss.com/raT0G6ZpkH

【讨论】：