Question

我有一个由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>

我不想在单个垂直列中生成标签和列，而是重新安排它，以便我在一列中有标签，在第二列中有编辑器字段（更多的是传统的数据输入表单）。我是MVC 4和HTML5的新手，并不是真的知道如何去做。如果有人可以帮我重新安排这个.cshtml代码来完成这个，我会非常感激。

Answer 1

以下是使用float:left和:before

的一种方法

http://jsfiddle.net/fdLca/

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

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

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

要四处使用：之前如果您需要支持older IE（＆lt; 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;
}

MVC4 - 如何重新排列由脚手架创建的生成字段

1 个答案: