Html 在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...

@{
var listItems=新列表（）；
添加（新建SelectListItem{Text=String.Empty，Value=String.Empty}）；
foreach（ViewBag.Names中的变量名）
{
添加（新建SelectListItem{Text=name，Value=name}）；
}
}
修复形式：@Html.DropDownList（“DropDownList”，listItems）
//代码。。。
工具：@Html.DropDownList（“kkcDropDownList”，kkcItems）
//代码。。。
文档：@Html.DropDownList（“docDropDownList”，docItems）
//代码。。。

我得到的结果是：

我想改变的是外观的顺序-现在是文本下拉，文本下拉。。 相反，我想成为文本，在文本下面是这样的下拉列表：

---

您可以将标签放在另一个元素中，定义并为其分配一个类，将其显示为块

选项#1

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

维修表格：
@Html.DropDownList（“DropDownList”，listItems）
//css
span.list-label{
显示：块；
}

选项2 将所有标签视为一个块。若将其和文本框一起使用，则标签将位于输入字段的顶部

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

维修表格：
@Html.DropDownList（“DropDownList”，listItems）
//css
标签{
显示：块；
}

根据您希望3个分组如何对齐，我有两个不同的建议

如果你愿意

text
dropdown

text
dropdown

text
dropdown

然后，您只需在文本和下拉代码之后添加相关的

标记

如果你愿意

text       text       text
dropdown   dropdown   dropdown

然后，您需要添加一个css规则，为您的跨度提供一个

display:inline块和相关宽度，以强制下拉列表适当换行

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

但是，这将设置所有跨度的样式，因此为跨度指定一个类，然后在CSS定义中使用该类

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

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


文本：下拉列表
span.aclass
{
显示：内联块；
宽度：150px；
}
我需要第二个选项。是否可以共享CSS示例代码？我将看看是否可以为您创建一个示例，下面是一个不需要额外标记的示例。谢谢，这帮了大忙。