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

【问题标题】：align text input boxes to right of div将文本输入框对齐到 div 的右侧
【发布时间】：2014-06-07 13:47:12
【问题描述】：

我正在尝试将文本输入对齐到 .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;
}

【问题讨论】：

如果您不想让它们浮动，请使用text-align。
我尝试将 text-align 应用于 .formColumn2 input{ text-align:right; } 但它没有用

标签： html css forms text input

【解决方案1】：

您可以设置标签的宽度。

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

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

这里是the fiddle

【讨论】：

【解决方案2】：

这行得通，有点骇人听闻，但这是另一种方法。

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

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

【讨论】：