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

回答

相关问题