html - 使用水平标签和垂直标签改进输入表单

Question

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

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>

有没有办法自动对齐顶部的标签，使它们与下面的列完全匹配？期待您的建议。问候，彼得

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>