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で幅を指定していません。そのため、子によるとスペースを取ります。ここで、最初の子が挿入されたとしましょう。親divは、子のスペースを占有します。次に、別の子を挿入します。次の子はインラインで表示されますが、兄弟と親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 に答える