如何使用CSS将同一行上的两个文本框对齐

Question

我有两个默认情况下使用“ display：block;”的文本框。 样式。 我想将标签保留在第一个文本框上方，但是我希望第二个文本框显示在第一个文本框的右侧。

这是我的看法：

<div class="form-group">
    @Html.LabelFor(model => model.DescriptiveSize, "Descriptive Size")
    @*2014-04-11: Issue #93*@
    @Html.TextBoxFor(model => model.DescriptiveSize, null, new { @class = "form-control", maxlength = "10",style = "width:25%;" })
    @Html.DropDownList("UomList", ViewData["UomList"] as SelectListItem[], new { @class = "form-control",style = "width:25%;" })
    @Html.ValidationMessageFor(model => model.DescriptiveSize)
</div>

外观如下：

编辑：这是HTML：

Answer 1

您可以在两个文本框中添加“ float：left”属性。 它使它在同一行上对齐。

HTML

ABC<br />
<div id="textbox1"></div>
<div id="textbox2"></div>

CSS

#textbox1, #textbox2 {
    display: block;
    float: left;    
    width: 100px;    
    height: 100px;    
}

#textbox1 {
    background-color: red;
}

#textbox2 {
    background-color: blue;
}

参见JSFIDDLE

Answer 2

只需在INPUT和SELECT元素上添加display: inline或display: inline-block即可：

HTML

<form class="selectSize">
    <label>Size</label>
    <input type="text" placeholder="Small"/>
    <select>
        <option>Select..</option>
        <option>Size 1</option>
        <option>Size 2</option>
    </select>
</form>

CSS

.selectSize label,
.selectSize input,
.selectSize select {
    display: block;
}

.selectSize input,
.selectSize select {
    display: inline;
}

的jsfiddle