css - 按钮与 float 和 PartialView 不在同一级别

Question

我的 View 末尾有以下两个按钮:

<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 部分 View :

@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;
}

但不幸的是这两个按钮不在同一层:

我这里的局部 View 有问题还是 float 属性？我该如何解决这个问题，使按钮出现在同一行中？

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中。