我的 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 属性? 我该如何解决这个问题,使按钮出现在同一行中?
最佳答案
如果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
中。
关于css - 按钮与 float 和 PartialView 不在同一级别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31190381/