Question

我试图让这些按钮彼此相邻显示，我猜我希望它是一种内联块样式，因此它们之间有一些空间。我曾尝试将display: inline和display: inline-block（不是同时）添加到#being-survey-btn，但没有运气。我还尝试将这些属性添加到.btn，但也没有运气。我尝试在{div}内部放置<span>个标签，并在<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;}

如何将这些按钮设为内联？ HTML ActionLink或Html.BeginForm问题

1 个答案: