ASP.NET MVC 3視圖中的樣式DropDownList

我在我的視圖中有三個DropDownLists。我用可視化它們的代碼是這樣的：ASP.NET MVC 3視圖中的樣式DropDownList

@{ 
    var listItems = new List<SelectListItem>(); 
    listItems.Add(new SelectListItem { Text = String.Empty, Value = String.Empty }); 
    foreach (var name in ViewBag.Names) 
    { 
     listItems.Add(new SelectListItem { Text = name, Value = name }); 
    } 
} 
    <span> 
     Repair Form : @Html.DropDownList("dropDownList", listItems) 
    </span> 
    //code... 
    <span> 
     Tools : @Html.DropDownList("kkcDropDownList", kkcItems) 
    </span> 
    //code... 
    <span> 
     Document : @Html.DropDownList("docDropDownList", docItems) 
    </span> 
    //code...

而且我得到這個的結果是：

ComboAsItIs

我想改變的是出場順序 - 現在是文本的下拉列表中，文本下拉.. insted的我想成爲文本和文本下面這樣的下拉列表：

ComboAsIWantIt

來源

2013-04-22 Leron

根據你希望3個分組對齊，我會有兩個不同的建議。

如果你想

text 
dropdown 

text 
dropdown 

text 
dropdown

那麼你可以簡單地添加文本後，並且下拉代碼後，相關<br/>標籤。

如果你想

text  text  text 
dropdown dropdown dropdown

，那麼你就需要添加一個CSS規則，讓您跨越display: inline-block;和相關的寬度強制下拉到適當包裝。

span 
{ 
    display: inline-block; 
    width: 150px; 
}

但是，將所有樣式的跨度，所以給你的跨度一類，然後使用在CSS定義。

<span class="aclass"> 
    Text: dropdown 
</span> 

span.aclass 
{ 
    display: inline-block; 
    width: 150px; 
}

來源

2013-04-22 11:16:59 Klors

我需要第二個選項。是否可以共享一個CSS示例代碼？ – Leron 2013-04-22 11:25:33

我會看看我能否爲你創建一個例子 – Klors 2013-04-22 11:38:28

這是一個簡單的例子。 http://jsfiddle.net/Klors/KVzxu/ – Klors 2013-04-22 11:49:00

您可以將標籤放入另一個元素中，併爲其定義並分配一個類，並將其顯示爲一個塊。

選項＃1

<span> 
    <span class="list-label">Repair Form</span> : 
     @Html.DropDownList("dropDownList", listItems) 
</span> 
// css 
span.list-label { 
    display: block; 
}

選項＃2 對待所有標籤爲一個塊。如果將其與文本框一起使用，則標籤將位於輸入字段的頂部。

<span> 
    <label>Repair Form</label> : 
     @Html.DropDownList("dropDownList", listItems) 
</span> 
// css 
label { 
    display: block; 
}

來源

2013-04-22 11:13:44

ASP.NET MVC 3視圖中的樣式DropDownList

回答

相關問題