垂直对齐提交按钮和带按钮标记的链接

Question

在我的MVC4 Web应用程序中，我有两个按钮，我希望彼此相邻显示。一个用于将表单POST到服务器，另一个用于发出GET请求（所以基本上是一个带按钮标记的链接）。

问题在于它们现在都显示在内联的不同高度（虽然它们都使用相同的CSS），这是我未知的原因。

这是FireFox中该问题的直观表示：

带有Razor的HTML如下所示：

<td align="right">
    <!-- LEFT POST BUTTON -->
    @using (Html.BeginForm("SettleWithSalary", "Transaction"))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        @Html.HiddenFor(id => item.UserId)
        @Html.HiddenFor(balance => item.Total)

        <button type="submit" class="btn btn-green">Settle</button>
    }
</td>
<td>| <!--RIGHT GET BUTTON-->
    @Html.ActionLink("Details", "Overview", "Transaction",
            new { id = item.UserId }, new { @class = "btn btn-green" })
</td>

在浏览器中生成的HTML如下：

<td align="right">
<form action="/Transaction/SettleWithSalary" method="post">
    <input name="__RequestVerificationToken" type="hidden" value="***blabla" />
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
            <li style="display:none"></li>
        </ul>
    </div>

    <!-- Two hidden fields with lots of information -->                     

    <button type="submit" class="btn btn-green">Settle</button>

</form>                
</td>
<td> |

    <a class="btn btn-green" href="/Transaction/Overview/2">Details</a>

</td>

我想要的是Settle按钮与Details按钮垂直对齐。我尝试在按钮元素周围放置一个style="float: none; vertical-align: top的div，但这不起作用。同时在按钮中放置style="position: absolute;"只会将Settle按钮设置为低于Details按钮。总之，我不知道如何解决这个问题。

这里有人知道为什么它们会以不同的高度显示，以及如何解决这个问题？

/编辑按要求：请参阅this Fiddle进行演示。

Answer 1

不同的浏览器在浏览器中设置了不同的默认CSS规则，称为用户代理样式表。

在您的代码中：

容器ul内的

validation-summary-valid具有默认用户代理margin 。因此，请将ul margin重置为0。

    .validation-summary-valid ul {
       margin:0;
     }

或者，您可以 reset.css 或 normalise.css （Google中的任何一个和 重置整个用户代理样式找到）。

Answer 2

试试这个..     <form> <table cellpadding="10" cellspacing="0" border="0"> <tr> <td colspan="2"><input name="__RequestVerificationToken" type="hidden" value="***blabla" /> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul> <li style="display:none"></li> </ul> </div> <!-- Two hidden fields with lots of information --> </td> </tr> <tr> <td style="border-right=1px solid #000000;"><button type="submit" class="btn btn-green">Settle</button></td> <td><a class="btn btn-green" href="/Transaction/Overview/2">Details</a></td> </tr> </table> </form>