使表单项适合其显示宽度

Question

Tailwind Play

我想让表单项适合它们的显示宽度。

每个表单都嵌套在 li 个元素中。

而且，我可以设法使 li 个元素适合显示宽度。

但它们的子元素（表单元素）不会延伸到 li 元素。

我了解表单元素（例如 input、textarea）是内联的，因此它们应该与其父元素一样宽。

你能帮我解决这个问题吗？

Answer 1

您实际上不需要将元素嵌套在 li 中，但无论您看到什么您唯一需要添加到子元素的是 w-full

看看： https://play.tailwindcss.com/pEY3BsH3qv

Answer 2

只需为 li 的子元素提供 w-full 并删除 m-3。在 li 元素

中给出 p-3 而不是子元素中的 m-3

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

使表单项适合其显示宽度

Fit form items to its display width

html

css

tailwind-css