構建一個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，以便所有鏈接都具有一致的寬度

回答

相關問題