与float和PartialView不同的按钮

Question

我的观点结尾处有两个按钮：

<table>
    <tr>
        <td>
            <div class="Left"><input type="submit" value="Test" class="button"/></div>
        </td>
        <td>
            @if (Model.Test != null)
            {
                @Html.Partial("_BackButton", Model.Test)
            }
        </td>
    </tr>
</table> 

_BackButton局部视图：

@model Test.Model.Shared.Test[]

@if (this.Model != null && this.Model.Length > 1)
{
    <div class="Right">
        <a href="@this.Model[this.Model.Length - 2].Url" class="button">@this.Model[this.Model.Length - 2].BackButtonLabel</a>
    </div>
}

她在css文件中的两个类：

div.Left {
    padding-right: 20px;
    float: left;
    display: inline-block;
}

div.Right {
    float: right;
    display: inline-block;
}

但不幸的是，这两个按钮不在同一级别上：

我在这里遇到局部视图有问题还是浮动属性？ 我该如何解决这个问题，所以按钮出现在同一行？

Answer 1

如果button类不包含inline-block或类似内容，则其中定义的垂直边距将不适用于<a>等内联元素。因此，边距仅适用于<input>。

简化示例：

table,
td {
  border: 1px solid;
  vertical-align: top;
}
.button {
  border: none;
  color: #FFF;
  background: #66F;
  margin: 15px 10px;
}

<table>
  <tr>
    <td>
      <input class="button" type="button" value="input">
    </td>
    <td>
      <a class="button" href="button">a</a>
    </td>
  </tr>
</table>

因此，解决方案是从样式中删除margin，或将display:inline-block放入。