显示标签上一行

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

你的意思是说呢？

 .label { 
 
     display: block; 
 
     } 
 

 
     .form { 
 
     display: flex; 
 
     } 
 

 
     .cell{ 
 
     float: left; 
 
     }

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

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; 
    }