使用flexbox

Question

我正在尝试使用flexbox重新创建这样的东西，以便标签和输入位于不同的行上

            <form  class="form">
              <label> Credit Card Number </label>
              <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">

              <label>Date</label>
              <input type="date" name="date">

              <label for="cvc">Cvc</label>
              <input type="text" name="cvc" placeholder="809">

            <label for="postcode">Zip</label>
            <input type="number" name="postcode" placeholder="94100">

              <input type="submit" value="Search">
            </form>

http://codepen.io/o-sewell/pen/egPGYm?editors=1100

Answer 1

你的意思是那样的？

＆＃13;

＆＃13;

      .label {
        display: block;
      }

      .form {
        display: flex;
      }

      .cell{
        float: left;
      }

＆＃13;

<form  class="form">
  <div class="cell">
    <label> Credit Card Number </label></br>
    <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
  </div>
  <div class="cell">
    <label>Date</label></br>
    <input type="date" name="date">
  </div>
  <div class="cell">
    <label for="cvc">Cvc</label></br>
    <input type="text" name="cvc" placeholder="809">
  </div>
  <div class="cell">
    <label for="postcode">Zip</label></br>
    <input type="number" name="postcode" placeholder="94100">
  </div>
  <div class="cell">
    <input type="submit" value="Search">
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

谢谢，我想我从你的回答中找到了答案

<form  class="form">
              <div class="cell">
              <label> Credit Card Number </label>
              <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
              </div>
              <div class="cell">
              <label>Date</label>
              <input type="date" name="date">
              </div>
              <div class="cell">
              <label for="cvc">Cvc</label>
              <input type="text" name="cvc" placeholder="809">
              </div>
              <div class="cell">
              <label for="postcode">Zip</label>
              <input type="number" name="postcode" placeholder="94100">
              </div>
              <input type="submit" value="Search">
            </form>


    form {
      display: flex;
    }

    .cell {
      display: flex;
      flex-direction: column;
      flex: 1;
    }