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>

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

4

1 回答 1

2

这是使用float:left和的一种方法: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 回答