錨定按鈕標籤不對齊

我似乎無法將錨定標籤的標籤對齊，看起來像一個按鈕。錨定按鈕標籤不對齊

取消標籤顯然是關閉的。我希望它與Next按鈕的標籤一致。我們需要取消按鈕作爲定位標記，因爲此網站需要在沒有Javascript的情況下運行。

enter image description here

人有什麼想法？

<div class="submit-voucher footer"> 
    <a href="@Model.ReturnUrl.ToString()" class="cancelLinkButton button cancel">Cancel</a> 
    <input class="button default" type="submit" name="submit" value="Next" /> 
</div>

下面是螢火蟲的CSS的取消鏈接/按鈕：

a, a:active, a:visited { 
    color: #0066DD; 
    text-decoration: none; 
} 
.cancelLinkButton { 
    height: 22px; 
    vertical-align: middle; 
} 
.button, input[type="submit"], input[type="button"], button { 
    background: -moz-linear-gradient(center top , #FDFDFD 0%, #EBEBEB 60%) repeat scroll 0 0 transparent; 
    border: 1px solid #BBBBAF; 
    display: inline-block; 
    padding: 0 20px; 
    width: auto; 
    }

下面是該DIV的CSS：

.submit-voucher.footer { 
    text-align: right; 
    vertical-align: middle; 
    border: 0 none; 
    font: inherit; 
    margin: 0; 
    padding: 0; 
    }

感謝您的幫助。

編輯：添加結束花括號代碼後。

來源

2011-09-28 AdamT

你的CSS似乎有一個明顯缺乏的'}'。 – thirtydot

良好的捕獲，但CSS是好的，我只是從螢火蟲複製它。我會在這篇文章中解決這個問題。 CSS在應用程序中打開和關閉大括號。 – AdamT

嘗試用行高使用

.cancelLinkButton { 
    height: 22px; 
    vertical-align: middle; 
    line-height:22px; 
}

來源

2011-09-28 16:45:56 Sanooj

我會再次說，匹配高度線高對我來說比嘗試使用填充更好。 – 2011-09-28 18:33:33

很簡單。只需添加一些padding-top至.cancelLinkButton。從它的外觀來看，你可能需要大約5px左右。

並且根據元素上的border-box值，您可能需要降低所添加的填充量相同的填充量的高度。如果你不知道什麼是border-box，那麼你幾乎肯定會需要降低高度。

來源

2011-09-28 15:16:50 maxedison

您正在將某個地方的CancelLinbutton屬性設置爲覆蓋下面設置的某個地方。找出所有取消按鈕的CSS引用，並查看實際使用的屬性。您可以使用F12並查看哪些屬性已應用，哪些已被覆蓋。

.cancelLinkButton { 
    height: 22px; 
    vertical-align: middle; 
}

來源

2011-09-28 15:28:54

錨定按鈕標籤不對齊

回答

相關問題