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

Question

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

以下是我的观点：

<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

只需将display: inline或display: inline-block添加到INPUT和SELECT元素：

<强> 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