Question

我有以下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>
 ....
 ....

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

Answer 1

内联样式意味着如果空间允许，则div将内联对齐。现在在父div上你没有给出任何宽度。所以它会根据它的孩子占用空间。现在假设插入了第一个孩子。父div将占用它的Child的空间。现在您要插入另一个Child。即使下一个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>

...

CSS问题 - 无法使<div>显示为内联</div>

1 个答案: