如何显示对方旁边HTML元素(How to display html elements beside

我有我的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标签 。

文章来源: How to display html elements beside each other