Подогнать элементы формы к ширине экрана

Попутный ветер

Я хотел бы подогнать элементы формы по ширине их отображения.

Каждая форма вложена в элемент li.

И мне удалось подогнать li элементов по ширине экрана.

но их дочерние элементы (которые являются элементами формы) не растягиваются до элемента li.

Я понимаю, что элементы формы (например, input, textarea) являются встроенными, поэтому они должны соответствовать ширине своего родителя.

Не могли бы вы помочь мне с этим?

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
0
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

На самом деле вам не нужно вкладывать элементы внутрь li, но все, что вы видите, единственное, что вам нужно добавить к дочернему элементу, это w-full

взглянуть: https://play.tailwindcss.com/pEY3BsH3qv

ваше предложение, похоже, не работает, потому что в правой части форм нет отступов и полей...

qo_op 24.04.2022 03:54

@qo_op да, может быть, потому что вы не упомянули об этом, вы только просили, чтобы элементы занимали всю ширину, в любом случае хорошо, что вы нашли ответ

Dhaifallah 24.04.2022 04:00
Ответ принят как подходящий

Просто дайте w-full для дочерних элементов li и удалите m-3. Вместо m-3 в дочерних элементах дайте p-3 в li элементах

<!doctype html>                                                                                               
<html class="h-full">                                                                                         
<head>                                                                                                      
  <meta charset="UTF-8">                                                                                  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">                                      
  <script src="https://cdn.tailwindcss.com"></script>                                                 
</head>   
<form class="bg-blue-100" action="/events" accept-charset="UTF-8" method="post">
  <input type="hidden" name="authenticity_token" value="Wn6NqXmIH7TeOeRE4XU28HGJfRwsUwJq1ykMHqza1v6aiKmoQCgKMi_j0TG5SLwMXGTeyudhcjk4UY2aeI_i_w" autocomplete="off" />
  <ul class="flex flex-wrap">
    <li class="w-screen p-3">
      <input placeholder="Event Name" class="w-full rounded border-transparent text-gray-700" type="text" name="event[name]" id="event_name" />
    </li>
    <li class="w-screen p-3 bg-red-500">
      <input value="2022-04-23" class="w-full rounded border-transparent text-gray-700" type="date" name="event[event_date]" id="event_event_date" />
    </li>
    <li class="w-screen p-3 bg-red-50">
      <textarea placeholder="Memo" class="w-full rounded border-transparent text-gray-700" name="event[memo]" id="event_memo"></textarea>
    </li>
    <li class="w-screen">
      <input type="submit" name="commit" value="Submit" class="ml-auto block" data-disable-with="Submit" />
    </li>
  </ul>
</form>

Другие вопросы по теме