html - 将文本输入框对齐到 div 的右侧

Question

我正在尝试将文本输入与 .formColumn2 的边缘对齐，以便它们都能很好地排列在一起，但我不确定该怎么做。我已经尝试过 margin-right:0 并尝试过 margin-left 但这扩展了我不想要的 .formColumn2 div。如果可能的话，我也想避免 float 。

这是我的代码:

http://jsfiddle.net/43w8G/

CSS

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

.bookingForm img {
width:200px;
margin:90px 0 0 170px;
}

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

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

.bookingForm .formColumn2 {
margin-left: 50px;
}

.bookingForm .formColumn2 input{
 margin-right:0;
}

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

Answer 1

您可以设置标签的宽度。

.formColumn2 label {
    width: 150px;
    display: inline-block;
}

这会将标签设置为固定宽度，使输入对齐。

这里是 the fiddle