css - 使用 CSS 为 ASP.NET MVC3 创建两个列布局创建 View

Question

我是 CSS 新手。我有一个创建记录页面，它有文本框、下拉列表、多选列表等 html 元素。 View create.html 如下:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>

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

        <div class="editor-label">
            @Html.LabelFor(model => model.EDate)
        </div>

        <div class="editor-field">
            @Html.EditorFor(model => model.EDate)
            @Html.ValidationMessageFor(model => model.EDate)
            @Html.EditorFor(model => model.ETime)
            @Html.ValidationMessageFor(model => model.ETime)
        </div>


         <div class="editor-label">
            @Html.LabelFor(model => model.SitID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("SiteID", new SelectList(ViewBag.Sit as System.Collections.IEnumerable, "SitID", "SitName"), "Select a Sit", new { id = "ddlSit" })

            @Html.ValidationMessageFor(model => model.SitID)
        </div>



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

            @Html.ListBoxFor(Model => Model.SelectedUnits, new SelectList(ViewBag.Unit as System.Collections.IEnumerable, "UnitID", "UnitName"), new { id = "ddlUnit", size="4", style = "width: 150px"  })
            @Html.ValidationMessageFor(model => model.UnitID)
        </div>


         <div class="editor-label">
            @Html.LabelFor(model => model.DestID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("DestID", "--Select One--")
            @Html.ValidationMessageFor(model => model.DestID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.RestID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("RestID", "--Select One--")
            @Html.ValidationMessageFor(model => model.RestID)
        </div>

         <div class="editor-label">
            @Html.LabelFor(model => model.Desc)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Desc, 10, 55, null)
            @Html.ValidationMessageFor(model => model.Desc)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>


    </fieldset>
}

定义的CSS样式如下:

fieldset 
{

    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

.display-label, 
.editor-label 
{

    margin: 1em 0 0 0; 
}

.display-field, 
.editor-field 
{
    margin: 0.5em 0 0 0; 
}

现在， View 以左对齐方式显示所有内容，并在每个标签下方显示文本框。我希望在 View 中有漂亮的两列布局，这样我就不必在该页面中向下滚动，而且如果我在同一行中有几个文件(例如开始日期、结束日期)，它看起来会更好。

请帮帮我。谢谢!

Answer 1

如果您使用 div，则每个 div(默认情况下)都在一行中。一种方法是执行以下 3 个步骤。

1) 设置标签的高度

2) 将你字段的位置设置为相对

3) 将字段的顶部设置为 -LABEL_HEIGHT

.display-label, 
.editor-label 
{
    height:24px;
    margin: 1em 0 0 0; 
}

.display-field, 
.editor-field 
{
    position:relative;
    top: -24px;
    float:right;
    margin: 0.5em 0 0 0; 
}

希望对你有帮助