html - 如何使这些按钮内联？ HTML ActionLink 或 Html.BeginForm 问题

Question

我试图让这些按钮彼此相邻显示，我猜我希望它是内联 block 样式，因此它们之间有一些空间。我尝试添加 display: inline和 display: inline-block (不是同时)到 #being-survey-btn ，但没有运气。我还尝试将这些属性添加到 .btn但也没有运气。我试过输入 <span>所有这些标签(在 div 内)以及放置 <span> <button> 周围的标签标签，我什么也没想到。使用 Bootstrap 。

我的 cshtml:

<div id="finish-survey-container">
  <div id="finish-survey-items">
    @using (Html.BeginForm("MakePDF", "HabitatManagement"))
    {
        <button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
    }
    @if (ViewBag.Type == "Habitat Management")
    {
        using (Html.BeginForm("Index", "HabitatManagement", new { userId = ViewBag.UserID }))
        {
            <button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
        }
    }
  </div>
</div>

我还尝试通过 ActionLink 设置样式(这实际上是我在尝试 Html.BeginForm 语法之前最初使用它的方式):

@Html.ActionLink("Save as PDF", "MakePDF", null, new { @id="begin-survey-btn", @class = "btn btn-default btn-lg", @style = "display: inline-block"})

我知道我一定遗漏了一些相当明显的东西。有人有想法吗？

编辑

生成的 HTML:

<div id="finish-survey-container">
  <div id="finish-survey-items">
    <form action="/HabitatManagement/MakePDF" method="post">
       <button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
    </form>
    <form action="HabitatManagement?userId=#" method="post">
       <button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
    </form>
  </div>
</div>

Answer 1

每个 Html.BeginForm 创建一个 form 元素，所以你的代码最终会像这个

<form>
  <button>..</button>
</form>
<form>
  <button>..</button>
</form>

您的问题是 form 元素默认为 block。这就是您需要解决的问题，为此您应该将这些 form 元素设置为 display:inline-block

有点像

#finish-survey-items form{display:inline-block;}