2014-04-11 36 views
0

我有兩個文本框,默認情況下使用「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

+0

您可以嘗試浮動輸入和文本框元素的左邊,也不要忘記清除浮動在父容器'.form-group'中。此外,你應該嘗試包括一個HTML輸出,所以我們知道你的最終標記是什麼樣子。 – Terry

+0

使用'display:inline-block'。它受到大多數瀏覽器(IE的任何人?)的支持,並應該訣竅。 – Gil

回答

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

+0

這會將文本框放在同一行上,但標籤「描述性大小」現在位於第二個文本框的右側。它應該在上面的行。 –

+0

您可以在第一個文本框前添加一個「
」標籤,它會在標籤後面添加一行。 –

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