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