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

时间:2014-04-11 15:14:25

标签: c# css asp.net-mvc razor

我有两个文本框,默认使用" 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>

以下是它的外观:

display

编辑:以下是HTML: HTML

2 个答案:

答案 0 :(得分:2)

您可以在两个文本框中添加“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

答案 1 :(得分:0)

只需将display: inlinedisplay: 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