在居中的文本输入顶部左右对齐标签答案

【问题标题】：Align label on left and right on top of centered text-input在居中的文本输入顶部左右对齐标签
【发布时间】：2018-03-21 07:50:58
【问题描述】：

我想让标签在两个居中的文本输入的左侧和右侧对齐，每个文本输入的宽度均为 40%。

这是现在的样子：https://jsfiddle.net/bcb4yu5h/2/

CSS：

input[type=text] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 3px;
    box-sizing: border-box;
}

input[type=text]:focus {
    outline: none;
}

HTML：

<div style="text-align: center">
    <label style="float: left" for="fname" >First Name</label>
    <span>
        <label style="float: right" for="sname" >Second Name</label>
    </span>
    <br>
    <input type="text" name="fname">
    <input type="text" name="sname">
</div>

【问题讨论】：

标签： html css input label

【解决方案1】：

一个快速的解决方案是以 % 为标签分配边距。（因为您知道左右固定的 % 宽度）

input[type=text] {
width: 40%;
padding: 12px 20px;
margin: 8px 3px;
box-sizing: border-box;
}
input[type=text]:focus {
outline: none;
}

<div style="text-align: center">
<label style="float: left; margin-left:10%" for="fname" >First Name</label><span>
<label style="float: right; margin-right:10%" for="sname" >Second Name</label></span><br>
<input type="text" name="fname">
<input type="text" name="sname">
</div>

注意：第一个label左侧和第二个label右侧的轻微位移是由于input[type=text] { margin: 8px 3px; }造成的。

使用 flex 的魔力和原子类的可重用性的优雅解决方案是：

    input[type=text] {
        padding: 12px 20px;
        margin: 4px 0;
        box-sizing: border-box;
        width: 100%;
    }

    input[type=text]:focus {
        outline: none;
    }

    .flex {
        display: flex;
    }

    .flex-space-evenly {
        justify-content: space-evenly;
    }

    .flex-align-end {
        align-items: flex-end;
    }

    .flex-direction-column {
        flex-direction: column;
    }

<div class="flex flex-space-evenly">
    <div style="width: 40%" class="flex flex-direction-column">
        <label for="fname">First Name</label>
        <input id="fname" type="text" name="fname">
    </div>

    <div style="width: 40%"  class="flex flex-direction-column flex-align-end">
        <label for="lname">Last Name</label>
        <input id="lname" type="text" name="fname">
    </div>
</div>

【讨论】：