如何创建两列布局表单？

Question

我是不是漏掉了什么？或者这不是正确的方法吗？请帮助我，看看这个并告诉我这里有什么问题

/*--- FORM ----*/

.form-container {
  width: 100%;
}

.form-container li {
  display: block;
  float: left;
  width: 100%;
  margin: 0 auto;
}

input,
select,
textarea {
  width: 60%;
}

label {
  text-align: left;
  margin-left: 18px;
  font-size: 100%;
}

<div class="row">
  <form method="post" action="#" class="contact-form">
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label for="first-name">First name:</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <input type="text" name="first-name" id="first-name" required>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label for="last-name">Last name:</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <input type="text" name="last-name" id="last-name" required>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label for="business-email">Business email:</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <input type="email" name="business-email" id="business-email" required>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label for="phone-number">Phone number:</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <input type="text" name="phone-number" id="phone-number" required>
          </li>
        </ul>
      </div>
    </div>

    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label for="company-name">Company name:</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <input type="text" name="company-name" id="company-name" required>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label for="cosize">Company size:</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <select name="cosize" id="cosize">
              <option value="small" selected>1-100</option>
              <option value="medium">101-2000</option>
              <option value="large">2001+</option>
            </select>
          </li>
        </ul>

      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label>How did you find us? :</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <select name="find-us" id="find-us">
              <option value="search" selected>Search engine</option>
              <option value="friends">Friends</option>
              <option value="ad">Advertisement</option>
              <option value="other">Other</option>
            </select>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label>Tell us what you wnat here</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <textarea name="message"></textarea>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <ul class="form-container">
          <li class="form-features">
            <label>&nbsp;</label>
          </li>
        </ul>
      </div>
      <div class="col span-2-of-3">
        <ul class="form-container">
          <li class="form-features">
            <input type="submit" value="Send message">
          </li>
        </ul>
      </div>
    </div>
  </form>
</div>

我已经使用样式表中的代码尝试创建一个 2 列布局表单，但它仍然不起作用。我做错了什么吗？

我是不是遗漏了什么，请帮忙解决这个问题！

Answer 1

我已经使用 flexbox

为您创建了一个示例

我删除了你的第一行，因为你不需要它，并将 css 添加到 form 和 .row

/*--- FORM ----*/

.form-container {
  width: 100%;
}

.form-container li {
  display: block;
  float: left;
  width: 100%;
  margin: 0 auto;
}

input,
select,
textarea {
  width: 60%;
}

label {
  text-align: left;
  margin-left: 18px;
  font-size: 100%;
}

form {
  display: flex;
  flex-wrap: wrap;
}

form .row {
  width: 50%;
}

<form method="post" action="#" class="contact-form">
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label for="first-name">First name:</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <input type="text" name="first-name" id="first-name" required>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label for="last-name">Last name:</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <input type="text" name="last-name" id="last-name" required>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label for="business-email">Business email:</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <input type="email" name="business-email" id="business-email" required>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label for="phone-number">Phone number:</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <input type="text" name="phone-number" id="phone-number" required>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label for="company-name">Company name:</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <input type="text" name="company-name" id="company-name" required>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label for="cosize">Company size:</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <select name="cosize" id="cosize">
            <option value="small" selected>1-100</option>
            <option value="medium">101-2000</option>
            <option value="large">2001+</option>
          </select>
        </li>
      </ul>

    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label>How did you find us? :</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <select name="find-us" id="find-us">
            <option value="search" selected>Search engine</option>
            <option value="friends">Friends</option>
            <option value="ad">Advertisement</option>
            <option value="other">Other</option>
          </select>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label>Tell us what you wnat here</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <textarea name="message"></textarea>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="form-container">
        <li class="form-features">
          <label>&nbsp;</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="form-container">
        <li class="form-features">
          <input type="submit" value="Send message">
        </li>
      </ul>
    </div>
  </div>
</form>