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

在我的MVC4 Web应用程序中，我有两个按钮，我想要彼此相邻显示。一个用于将表单发布到服务器，另一个用于创建GET请求（所以基本上是一个带有按钮标记的链接）。垂直对齐提交按钮和带按钮标记的链接

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

这是在Firefox的可视化表示的问题：

Button next to each other

与剃刀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>

我想要的是结算bu tton与Details按钮垂直对齐。我试图用style="float: none; vertical-align: top围绕按钮元素，这是行不通的。同时在按钮中放置一个style="position: absolute;"只是将它们放在彼此的顶部，并且Settle按钮低于Details按钮。总之，我不知道如何解决这个问题。

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

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

来源

2013-11-28 Erwin Rooijakkers

请出示一个活生生的例子（jsfiddle.net），包括格式化你申请到这一点。 – CBroe

“Settle”按钮位于表单元素中。表单元素默认有一个顶部边距，所以你必须删除它。或者您可以在按钮上设置负顶部边距。 – iddo

无法预测解决方案，请包含您的各自的CSS或创建一个小提琴。 –

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

在这里，你的代码：

ulvalidation-summary-valid具有默认用户代理margin容器内。因此重置ulmargin到0。

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

或者您也可以通过包括reset.css或normalise.css（谷歌任何这些又找到了）复位整个用户代理样式。

来源

2013-11-28 11:55:34

好！这就像一个魅力。 –

试试这个.. <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>  </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>

来源

2013-11-28 11:59:09 Marinus

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

回答

相关问题