左对齐表单标签和空格输入元素

Question

我正在努力保持对齐表格上的标签并将输入和按钮元素区分开来。任何人都可以提供有关如何完成任务的建议，同时保持输入元素居中？

CSS代码：

.bt input {
    border: 1px solid #ccc;
    color: rgb(60, 60, 60);
    display: block;
    width: 80%;
    padding: 1em;
    margin: 0 auto;
}

.bt button {
    width: 100%;
    padding: 1.5em;
    background-color: #1f1f1f;
    color: #fff;
    border: 0;
}

.bt button:hover {
    background-color: #818181;
    cursor:pointer;
}

.fbc {
    text-align: center;
}

.bt .fb {
    background-color: #D5D5D5;
    padding: 2em;
    color: #585858;
    display: inline-block;
    width: 50%;
}

HTML code：

 <div class="bt fbc">
            <div class="fb">
            <label>Name (Required)
            <input type="text" placeholder="Name" required autofocus> 
            </label>
            <label>Email (Required)
            <input type="text" placeholder="example@domain.com" required autofocus> 
            </label>
            <button>SUBMIT BOOKING</button>
            </div>
        </div>

Jsfiddle：http://jsfiddle.net/r11qv9kh/1/

Answer 1

您的标签是内联元素，因此将从其父元素获取文本对齐方式。您可以给它们一个块显示并直接指定它们的文本对齐方式以使它们向左移动。

HTML：

<label for="name">Name (Required)</label>
<input id="name" type="text" placeholder="Name" required autofocus>

CSS：

.bt label {
    text-align: left;
    display: block;
}

小提琴：http://jsfiddle.net/r11qv9kh/2/

Answer 2

为标签定义新样式：

.bt label {
    margin-bottom: 1em;
    display: block;
    box-sizing: border-box;
    padding: 0 10%;
    text-align: left;
}

并更改输入的宽度样式：

.bt input {
    ...
    width: 100%;
    box-sizing: border-box;
}

在这种情况下，您不必修改HTML。

演示：http://jsfiddle.net/r11qv9kh/3/light/

Answer 3

这会将您的标签对齐到左侧：

Text-align: left;