0

私のビューには 3 つの 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...

そして、私はこれを結果として得ます:

コンボそのまま

私が変更したいのは外観の順序です-今はテキスト-ドロップダウン、テキスト-ドロップダウンです..私はテキストになりたいと思い、テキストの下にドロップダウンを次のようにします:

ComboAsIWantIt

4

2 に答える 2

1

3 つのグループをどのように並べるかによって、2 つの異なる提案があります。

お望みならば

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-22T11:16:59.903 に答える
0

ラベルを別の要素内に配置し、クラスを定義して割り当て、ブロックとして表示できます。

オプション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-22T11:13:44.187 に答える