Question

我希望标签在两个居中的文本输入的左侧和右侧分别对齐，每个文本输入的宽度均为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>

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

注意：第一个标签左侧和第二个标签右侧的轻微位移归因于input[type=text] { margin: 8px 3px; }。< / p>

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

在中心文本输入的顶部左右对齐标签

1 个答案: