html - 在 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规则来给你的跨度adisplay: 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;
}