Question

我正在尝试在此表单上应用display：flex并失败。 HTML的结构无法改变，我不能为我的生活弄清楚如何去做。它们全部内联（包括按钮）的唯一方法是在和 .form-fields形式上应用flex。但是当表单换行时，按钮会停留在第一行，而姓氏的输入字段会进入第二行。

我做错了什么？如果不触及HTML，我只能用CSS做什么？谢谢！

form, .form-fields {
  display: flex;
}

<div class="form">
  <form>
    <div class="form-body">
      <ul class="form-fields">
        <li class="form-field">
          <div class="input-container">
            <span class="name_first">
              <input type="text" name="first_name" id="first_name" value="" placeholder="First Name *" required="">
            </span>
            <span class="name_last">
              <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name *" required="">
            </span>
          </div>
        </li>
        <!--  name and last name -->

        <li class="form-field">
          <div class="input-container">
            <input name="email_address" id="email_address" type="email" value="" placeholder="Email *" required="">
          </div>
        </li>
        <!-- email adress -->
        <li class="form-field">
          <div class="input-container">
            <input name="phone_number" id="phone_number" type="tel" value="" placeholder="Phone *" required="">
          </div>
        </li>
        <!--  phone -->
      </ul>
      <input name="action" type="hidden" value="Request an Info Sheet">
    </div>
    <div class="form-footer">
      <button type="submit" class="form_button">
        <span>Contact Us</span>
      </button>
    </div>
    <!-- button -->
  </form>
</div>

Answer 1

添加flex-wrap会将按钮发送到下一行的末尾：

form, .form-fields {
  display: flex;
  flex-wrap: wrap;
}

Answer 2

我认为这可能是你想要做的。我所做的只是添加：flex-direction: column;。

flexbox的默认值是row。这将使弹性项目成为一行，并将孩子们分散到该行上。

将flexbox的值设置为列，将使flex项成为列，并将子项扩展到该列之外。

希望它有所帮助;）

form, .form-fields {
  display: flex;
  flex-direction: column;
}

<div class="form">
  <form>
    <div class="form-body">
      <ul class="form-fields">
        <li class="form-field">
          <div class="input-container">
            <span class="name_first">
              <input type="text" name="first_name" id="first_name" value="" placeholder="First Name *" required="">
            </span>
            <span class="name_last">
              <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name *" required="">
            </span>
          </div>
        </li>
        <!--  name and last name -->

        <li class="form-field">
          <div class="input-container">
            <input name="email_address" id="email_address" type="email" value="" placeholder="Email *" required="">
          </div>
        </li>
        <!-- email adress -->
        <li class="form-field">
          <div class="input-container">
            <input name="phone_number" id="phone_number" type="tel" value="" placeholder="Phone *" required="">
          </div>
        </li>
        <!--  phone -->
      </ul>
      <input name="action" type="hidden" value="Request an Info Sheet">
    </div>
    <div class="form-footer">
      <button type="submit" class="form_button">
        <span>Contact Us</span>
      </button>
    </div>
    <!-- button -->
  </form>
</div>

将display：flex应用于表单

2 个答案: