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

【问题标题】：How to display html elements beside each other如何在彼此旁边显示html元素
【发布时间】：2013-07-09 15:58:10
【问题描述】：

我的 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 /> 元素并排显示，而不是在彼此下方？

【问题讨论】：

如果答案有效，请您选择它吗？

标签： html asp.net-mvc razor

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

p.inlineParagraph{
    display:inline;
}

jsFiddle example

【讨论】：

【解决方案3】：

How to display HTML <FORM> as inline element?

<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;
}

【讨论】：

它会起作用，但是两个按钮之间会浪费空间。