Question

我的一个观点中有这个表格：

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

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

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

但我希望其中一些表单字段位于同一行。我怎么能得到这个？我已经尝试将div放在div中，其中'style ='style =“margin：0; padding：0”''但我什么都没有。

Answer 1

默认情况下，

<div>元素具有display:block样式。块意味着它扩展到容器的整个宽度，并且不允许内容在同一行中（浮动或绝对定位的对象除外，但这不是您需要的）。

您需要将display:inline-block样式应用于标签和字段容器。此外，您可能需要添加另一个<div>，其默认显示样式包含标签和字段，以便每行只显示一个字段。

请参阅http://jsfiddle.net/a4Lwc/1/了解样本。

Answer 2

你应该指定float，当你使用float for div（或块元素）时，让另一个元素位于它旁边

   <div class="editor-label" style=" float:left;">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field" >
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="editor-label" style=" float:left;">
        @Html.LabelFor(model => model.Number)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Number)
        @Html.ValidationMessageFor(model => model.Number)
    </div>

如何将所有与html相关的字段放在同一行？

2 个答案: