0

次のような MVC4 スキャフォールディングによって作成された .cshtml ファイルがあります。

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>BicycleSellerListing</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.BicycleManfacturer)
        </div>
        <div class="editor-field">
            @Html.DropDownList("ManufacturerList")
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.BicycleType)
        </div>
        <div class="editor-field">
            @Html.DropDownList("TypeList")
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ListingPrice)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ListingPrice)
            @Html.ValidationMessageFor(model => model.ListingPrice)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Comments)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Comments)
            @Html.ValidationMessageFor(model => model.Comments)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

ラベルと列が単一の垂直列に生成される代わりに、1 つの列にラベルがあり、2 番目の列にエディター フィールドがあるようにこれを再配置したいと思います (従来のデータ入力フォームのほうが多いです)。私は MVC 4 と HTML5 に非常に慣れていないため、これを行う方法がよくわかりません。これを達成するためにこの .cshtml コードを再配置するのを誰かが手伝ってくれたら、とても感謝しています。

4

1 に答える 1

2

float:leftとを使用する 1 つの方法を次に示します。:before

http://jsfiddle.net/fdLca/

.editor-label {
    float:left;
    width:20%;
}

.editor-label:before {
    clear:left;
}

.editor-field {
    float:left;
    width:80%;
}

:before を使用して回避するには、古い IE (< 9)をサポートする必要がある場合は、各フィールドとラベルの間で純粋にクリアするために使用される要素を追加できます。

http://jsfiddle.net/fdLca/1/

HTML

<div class="editor-label">
    label1
</div>
<div class="editor-field">
    @Html.DropDownList("ManufacturerList")
</div>

<div class="clear"></div>

CSS

.clear {
    clear:left;
}
于 2013-02-20T12:23:54.023 に答える