按钮与浮动和 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 class 不包含 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放进去。

按钮与浮动和 PartialView 不在同一级别

Buttons not on same level with float and PartialView

css

asp.net-mvc

css-float

razor