0

以下は、スクリーンショットとASPMVCWebサイトからのHTMLのコピーです。最後の段落要素(コードの下部)は、他の2つのフィールドセットと水平方向に並んでいますが、ページの下部にある必要があります。HTML / Webデザインは常に私のアキレス腱でした。そのため、誰かが何が起こっているのか、そして可能な解決策を説明できれば、私はとても感謝しています。

@model Monet.Models.FollowUpItems

@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit Follow Up Item</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">     </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<div>
<span style = "float:left;padding-right:4em">
<fieldset>
    <legend>Status Items</legend>

    <div class="error">
        @ViewBag.ErrorMessage
    </div>

    @Html.HiddenFor(model => model.Id)

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


    <div class="editor-label">
        @Html.LabelFor(model => model.Notes)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Notes)
        @Html.ValidationMessageFor(model => model.Notes)
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
</span>
<span style="clear:both;"></span>
<span style="float:left;">
<fieldset>
    <legend>Basic Info</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.TableName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TableName)
            @Html.ValidationMessageFor(model => model.TableName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Message)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Message)
            @Html.ValidationMessageFor(model => model.Message)
        </div>

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

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

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

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

        <div class="editor-label">
            @Html.LabelFor(model => model.Key2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Key2)
            @Html.ValidationMessageFor(model => model.Key2)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.IssueType)
        </div>
        <div class="editor-label">
            @Html.EditorFor(model => model.IssueType)
            @Html.ValidationMessageFor(model => model.IssueType)
        </div>
</fieldset>
</span>

</div>
<span style="clear:both;"></span> 
 }
 <span style="clear:both;"></span>
 <p>
     @Html.ActionLink("Back to List", "Index")
 </p> 

ここに画像の説明を入力してください

4

2 に答える 2

1

クリアスパンがdispaly:blockに設定されているかどうかはコードからわかりませんが、次のようにする必要があります。

<span style="display:block;clear:both;"></span>
于 2013-01-17T17:24:30.927 に答える
0

スパンはinline要素です

これを置き換えます:

<span style = "float:left;padding-right:4em">

と:

<div style = "float:left;padding-right:4em; overflow: hidden;">

そして、ええ、すべての<span>sを<div>sに変換して確認してください。

于 2013-01-17T17:21:48.283 に答える