Question

我们正在使用帖子和获取，开箱即用的链接显示为链接（获取）和按钮（帖子）。为了给UI提供愉快和一致的外观，我们使用按钮主题所有UI点击交互使用css看起来相同：

.minimal
{
   background: #e3e3e3;
   border: 1px solid #bbb;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
   -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
   box-shadow: inset 0 0 1px 1px #f6f6f6;
   color: #333;
   font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
   padding: 5px 20px 5px 20px;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
   text-decoration: none;
}

.minimal:hover
{
   background: #d9d9d9;
   -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
   -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
   box-shadow: inset 0 0 1px 1px #eaeaea;
   color: #222;
   cursor: pointer;
}

.minimal:active
{
   background: #d0d0d0;
   -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
   -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
   box-shadow: inset 0 0 1px 1px #e3e3e3;
   color: #000;
}

......并以这种方式使用：

 @Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {@class = "minimal"})
 <input type="submit" class = "minimal" value="submit" />

问题在于.minimal中的padding语句，似乎取决于ActionLink中包含的文本长度，您将获得更长或更短的按钮。我会使用'width'标签，但仅对帖子有效...而不是在ActionLinks上。有没有人成功解决过这个问题？

Answer 1

width仅适用于块元素。尝试添加：

a.minimal {
    display: inline-block;
    padding: 5px 0;
    width: 198px; /* subtract border */
}

并将宽度添加到.minimal：

width: 200px;

（或一般的链接样式，并以特殊方式处理提交按钮）

为了更好的跨浏览器兼容性，您可能还需要根据此(old) article做一些技巧：

a.minimal {
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    padding: 5px 0;
    width: 198px; /* subtract border */
}

您需要尝试适用于目标浏览器的内容。我尝试了第一个（更简单的）解决方案，它适用于所有当前浏览器和IE7 + IE8。

创建一个MVC3 ActionLink，以便所有链接具有一致的宽度

1 个答案: