如何对齐与CSS的同一行上的两个文本框

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

这是我的观点：

<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

来源

2014-04-11 devlin carnate

您可以尝试浮动输入和文本框元素的左边，也不要忘记清除浮动在父容器'.form-group'中。此外，你应该尝试包括一个HTML输出，所以我们知道你的最终标记是什么样子。 – Terry

使用'display：inline-block'。它受到大多数浏览器（IE的任何人？）的支持，并应该诀窍。 – Gil

您可以添加一个“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

来源

2014-04-11 15:19:31

这会将文本框放在同一行上，但标签“描述性大小”现在位于第二个文本框的右侧。它应该在上面的行。 –

您可以在第一个文本框前添加一个“
”标签，它会在标签后面添加一行。 –

只需添加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

来源

2014-04-11 15:27:02 Chris

如何对齐与CSS的同一行上的两个文本框

回答

相关问题