HTML表单对齐输入框

Question

我希望输入框在右边缘排成一行我不知道该怎么做。

http://jsfiddle.net/Q9b62/

这是我的CSS：

.bookingForm {
height:450px;
background-color: #D3412A;
}

form{
padding:20px 0 0 70px;
margin-left: 10%;
}

form select,form input,form textarea {
margin:8px 0;
}

.bookingForm .formColumn1,
.bookingForm .formColumn2{
float:left;
}

Answer 1

试试这个

我在codepen上做了一个演示。 http://cdpn.io/vCzgb

Answer 2

检查此链接     http://jsfiddle.net/Q9b62/5/

如果你不理解任何事情，我已经改变了一些css让我知道。

.container {
    width: 960px;
    margin:0 auto;
    background-color: blue;
}

.bookingForm {
    height:auto;
    background-color: #D3412A;
}
.bookingForm:before, .bookingForm :after {
    content: "";
    display: table;
    line-height: 0;
}
.bookingForm :after {
    clear: both;
}


form{
    padding:20px 0 0 70px;
    margin-left: 10%;
}

form select,form input,form textarea {
    margin:8px 8px 8px 0;
}

.bookingForm .formColumn1,
.bookingForm .formColumn2{
    float:left;
}
label{
    display:inline-block;
    width: 120px;
}
label[for="additionalInfo"]{
    width: auto;
    display: block;
}

Answer 3

我不确定这是否是你所追求的。只需用以下内容更新您的CSS：

form select,form input,form textarea {
    margin:8px 0;
    display:inline-block;
}
form label{
    display:inline-block;
    min-width:30%;

}

这将允许标签留在左侧，文本区域，输入和选择将位于标签的右侧。这是假设我正确理解你的问题：）