html - 如何在彼此旁边显示html元素

Question

我的 asp.net MVC Razor 视图中有以下代码：

<p>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.GroupID)
    @Html.Partial("_CreateOrEdit", Model)

    <input type="submit" value="Save" class="btn btn-primary"/>
}

@using (Html.BeginForm("Index", "SecurityGroup", FormMethod.Get))
{
    <input type='submit' value='Cancel' class='btn' />
}
</p>

我怎样才能强制这两个<input />元素并排显示，而不是在彼此下方？

Answer 1

如何将 HTML <FORM> 显示为内联元素？

一个<p>元素只允许包含内联元素。<form>不是内联的，它是一个块元素。尝试将表单包装在<div>s 中，例如：

<div class="form-container">
    @using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.GroupID)
    @Html.Partial("_CreateOrEdit", Model)

     <input type="submit" value="Save" class="btn btn-primary"/>
    }
</div>
<div class="form-container">
    @using (Html.BeginForm("Index", "SecurityGroup", FormMethod.Get))
    {
        <input type='submit' value='Cancel' class='btn' />
    }
</div>

然后使用以下样式表（作为内联样式或在 CSS 中）

.form-container{
    display:inline-block;
}

Answer 2

向此段落（或 ID）添加一个类。使此类 (ID) 内联显示。

p.inlineParagraph{
    display:inline;
}

jsFiddle 示例

Answer 3

您可以使用表格将按钮彼此相邻放置：

<table>
  <tr>
    <td>
      @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.GroupID)
        @Html.Partial("_CreateOrEdit", Model)
        <input type="submit" value="Save" class="btn btn-primary"/>
      }
    </td>
    <td>
        @using (Html.BeginForm("Index", "SecurityGroup", FormMethod.Get)) {
          <input type='submit' value='Cancel' class='btn' />
        }
    </td>
</tr>

您还可以查看引导导航栏和 div 标签。