MVC 表单：在相同的垂直对齐上将 Actionlink 和按钮彼此相邻对齐答案

【问题标题】：MVC Form: align Actionlink and button next to each other on same vertical alignmentMVC 表单：在相同的垂直对齐上将 Actionlink 和按钮彼此相邻对齐
【发布时间】：2019-11-15 20:12:12
【问题描述】：

我的按钮和操作链接使用相同的 css 类，但是它们没有正确对齐。见：https://imgur.com/ZQ0XZbA

这是我的代码：

@model MyModel

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "DossierForm", data_validate_form = "" }))
{
<div id="DDetails">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    @Html.DisplayFor(m => m.WarningMessage)
    @Html.DisplayFor(m => m.ErrorMessage)
    @...

    <div style="display: inline;">
        @Html.ActionLink("cancel", null, null, new { @class = "button button--secondary" })
        <button id="submitbutton" value="save" title="save" type="button" class="button button--secondary">save</button>
    </div>
</div>

}

如何将按钮和操作链接放在同一高度？

【问题讨论】：

分享你渲染的html和相关css

标签： html css asp.net-mvc forms asp.net-mvc-4

【解决方案1】：

将按钮和操作链接放在带有display: inline-flex; vertical-align:top" 的 div 中就可以了：

<div style="display: inline-flex; margin-right: .5em; vertical-align:top">
    @Html.ActionLink("cancel", null, null, new { @style = "margin-right: 5px;", @class = "button button--secondary" })
<button id="submitbutton" value="save" title="save" type="button" class="button button--secondary">save</button>
</div>

【讨论】：