改善水平标签和垂直标签的输入表格

Question

你能看看HTML/CSS代码和this link背后的结果吗？

的CSS部分：

div2 {display: table-cell; vertical-align: middle; border: 0px solid red; } 

input {margin: 5px; } 
label1 {margin-left: 140px; } 
label2 {margin-left: 100px; } 
label3 {margin-left: 90px; } 
label {margin-left: 10px; margin-right: 20px; } 

HTML部分：

<div1> 
    <label1>First name</label1> 
    <label2>Last name</label2> 
    <label3>Date of birth</label3> 
</div1> 


<div2> 
    <label for='name'>Person 1:</label> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
<br> 
    <label for='name'>Person 2:</label> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
<br> 
    <label for='name'>Person 3:</label> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
<br> 
    <label for='name'>Person 4:</label> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
<br> 
    <label for='name'>Person 5:</label> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
    <input type='text' id='name' /> 
</div2> 

是否有办法来自动对齐顶部的标签，所以他们正好与下面的colomns匹配吗？期待您的建议。问候，彼得·

Answer 1

使用display: table或table

* { 
 
    padding; 
 
    0; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 0px solid red; 
 
    padding: 5px 10px; 
 
    vertical-align: middle; 
 
} 
 
.row:nth-child(1) { 
 
    text-align: center; 
 
} 
 
.row:nth-child(1) .cell { 
 
    padding-bottom: 0; 
 
} 
 
.row:nth-child(1) .cell label { 
 
    margin-bottom: 0; 
 
} 
 
input, label { 
 
    display: block; 
 
    width:100%; 
 
    margin: 5px 0; 
 
} 
 
label { 
 
    margin-left: 5px; 
 
    margin-right: 15px; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
     <div class="cell"></div> 
 
     <div class="cell"> 
 
      <label>First name</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <label>Last name</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <label>Date of birth</label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <label for='name'>Person 1:</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <label for='name'>Person 2:</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <label for='name'>Person 3:</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <label for='name'>Person 4:</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <label for='name'>Person 5:</label> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
     <div class="cell"> 
 
      <input type='text' id='name' /> 
 
     </div> 
 
    </div> 
 
</div>