Question

我正在尝试将文本输入与.formColumn2的边缘对齐，这样它们就能很好地排列在一起，但我不知道该怎么做。我尝试了margin-right：0并尝试了margin-left但是扩展了我不想要的.formColumn2 div。如果可能的话，我也想避免浮动。

这是我的代码：

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

Answer 2

这有点像hackish，但这是另一种方法。

.bookingForm .formColumn2 input {
    margin-right:0;
    float:right;
}
.bookingForm .formColumn2 label {
    line-height: 35px;
}

http://jsfiddle.net/emersive/Jwvq6/

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

2 个答案: