Блог

Главная - Вопросы по программированию - Как это сделать: Выберите элемент полной ширины с помощью CSS с попутным ветром

Как это сделать: Выберите элемент полной ширины с помощью CSS с попутным ветром

#css #tailwind-css

Вопрос:

Используя CSS Tailwind, как я могу заставить элемент select растягиваться на всю ширину содержащего его элемента? Вот мой код:

 <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>

Консоль показывает, что дисплей настроен на блокировку элемента select, но он по-прежнему занимает только столько ширины, сколько требуется для содержимого параметров.

Ответ №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

Метки: