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

我们正在使用帖子和获取，即时框出现为链接（获取）和按钮（帖子）。在努力提供一个舒适和一致的外观到用户界面，我们按钮主题的所有用户界面点击互动，看起来使用CSS一样：构建一个MVC3 ActionLink，以便所有链接都具有一致的宽度

.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中的填充语句，看起来取决于ActionLink中包含的文本的长度，您将获得更长或更短的按钮。我会使用'宽度'标签，但只对帖子有影响...不在ActionLink上。有没有人成功解决了这个问题？

来源

2012-02-29 Geoff

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。

来源

2012-02-29 13:46:48

设置显示：inline-block;是关键。感谢这一切，所有的作品。 – Geoff 2012-02-29 14:02:57

@Geoff - 注意：如果重要的话，内联块在IE7中不起作用。 – 2012-02-29 15:38:44

@MystereMan它将IE 9放入IE7模式，但我没有真正的IE7。不过这是一个有趣的阅读：http://www.brunildo.org/test/InlineBlockLayout.html – 2012-02-29 15:48:32

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

回答

相关问题