在ASP.NET MVC 3视图中设置DropDownList样式

Question

我认为我有三个DropDownLists。我用来可视化它们的代码是这样的：

@{
    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...

我得到了这个结果：

我想要改变的是外观的顺序 - 现在是text-dropDown，text-dropDown .. Insted我想成为文本，并在文本下方dropDown如下：

Answer 1

根据您希望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;
}

Answer 2

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

选项＃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;
}