0

我有以下 HTML：

@using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    @Html.ValidationSummary(true)

    <fieldset style="margin:5px;">
        <legend>List a Bicycle for Sale</legend>

        <div style="display: inline">
            <div style="display: inline">
                @Html.LabelFor(model => model.BicycleManfacturer)
            </div>
            <div style="display: inline">
                @Html.DropDownList("ManufacturerList")
            </div>

            <div style="display: inline">
                @Html.LabelFor(model => model.BicycleType)
            </div>
            <div style="display: inline">
                @Html.DropDownList("TypeList")
            </div>

            <div style="display: inline">
                @Html.LabelFor(model => model.BicycleModel)
            </div>
            <div style="display: inline">
                @Html.EditorFor(model => model.BicycleModel)
                @Html.ValidationMessageFor(model => model.BicycleModel)
            </div>
 ....
 ....

我无法使标签和编辑字段彼此相邻（通过使用内联）。编辑字段始终显示在标签下方。有谁知道我可能做错了什么？

4

1 回答 1

1

内联样式意味着如果空间允许，则 div 将内联对齐。现在在父 div 上你没有给出任何宽度。所以它会根据它的Child占用空间。现在让我们假设第一个孩子被插入。父 div 将占用它的子空间。现在你想插入另一个孩子。即使下一个 Child 具有内联显示，它也不会在其兄弟姐妹旁边找到任何空间，因为兄弟姐妹和父 div 占用相同的空间。因此它将在下一行呈现。尝试这样做：

@using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    @Html.ValidationSummary(true)

<fieldset style="margin:5px;">
    <legend>List a Bicycle for Sale</legend>

    <div style="display: inline; width: 1000px;">
        <div style="display: inline">
            @Html.LabelFor(model => model.BicycleManfacturer)
        </div>
        <div style="display: inline">
            @Html.DropDownList("ManufacturerList")
        </div>

...
于 2013-03-01T12:27:51.797 回答