улучшить форму ввода с горизонтальными метками и вертикальными метками

Question

Вы бы могли взглянуть на HTML/CSS-код и получить результат this link?

СМЧ часть:

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>