如何使用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