html - 难以对齐表单元素以使其看起来正确且响应迅速

Question

我很难将表单元素对齐成如下所示:

现在看起来像这样:

不知道如何修复它，到目前为止我一直在尝试使用 CSS，但似乎没有任何效果。此外，它似乎没有响应，当我缩小浏览器窗口时，会出现很多溢出。到目前为止，这是我的代码:

CSS

.bookings {
    background-color: #FFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}
.bookings h1 {
    font-size: 25px;
    text-align: center;
    color: #F3C;
}
::-webkit-input-placeholder {
 color: blue;
}
.bookingform input, .bookingform textarea, .bookingform select {
    border: 1px solid #000;
}
.bookingform {
    border: 1px solid #000;
    border-style: solid;
    padding: 1em;
    margin: 2em;
}
.bookingform textarea {
    width: 30%;
    height: 60%;
}
.option label {
    display: block;
    width: 20em;
    text-align: right;
    margin-right: 20em;
}
input#time {
    display: inline;
}
.bookingform input type=["checkbox"] {
 float:right;
}

Jsfiddle:http://jsfiddle.net/zqqb62j8/1/

Answer 1

减少了标签的宽度和右边距，并将它们设置为 inline-blocks。此外，从它们中删除输入，它们不需要是标签的 child ，而是 sibling :

.option label {
    display: inline-block;
    width: 10em;
    text-align: right;
    margin-right: 2em;
}

看看前三个元素的样子:http://jsfiddle.net/zqqb62j8/2/

---

更新

这是一个更简单/可读的例子，类似于你想要的:http://jsfiddle.net/zqqb62j8/7/