Fit form items to its display width-CodePudding

I’d like to fit form items to its display width.

Each form is nested within li element.

And, I could manage to fit li elements to display width.

but their child elements (which are form elements ) does not stretch to the li element.

I understand form elements (eg. input, textarea) are inline, so that it should fit as wide as its parent.

Would you help me out for this?

CodePudding user response：

You don't actually need to nest the elements inside li but whatever you see the only thing you need to add to the child element is w-full

have a look: https://play.tailwindcss.com/pEY3BsH3qv

CodePudding user response：

Just give w-full for child elements of the li and remove m-3. Instead of m-3 in childs, give p-3 in li elements

<!doctype html>                                                                                               
<html >                                                                                         
<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  action="/events" accept-charset="UTF-8" method="post">
  <input type="hidden" name="authenticity_token" value="Wn6NqXmIH7TeOeRE4XU28HGJfRwsUwJq1ykMHqza1v6aiKmoQCgKMi_j0TG5SLwMXGTeyudhcjk4UY2aeI_i_w" autocomplete="off" />
  <ul >
    <li >
      <input placeholder="Event Name"  type="text" name="event[name]" id="event_name" />
    </li>
    <li >
      <input value="2022-04-23"  type="date" name="event[event_date]" id="event_event_date" />
    </li>
    <li >
      <textarea placeholder="Memo"  name="event[memo]" id="event_memo"></textarea>
    </li>
    <li >
      <input type="submit" name="commit" value="Submit"  data-disable-with="Submit" />
    </li>
  </ul>
</form>