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

How to display HTML <FORM> as inline element?

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

<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 example

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>

您还可以查看bootstrap navigation bar and div tags。

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

3 个答案: