锚定按钮标签不对齐

问题描述：

我似乎无法将锚定标签的标签对齐，看起来像一个按钮。锚定按钮标签不对齐

取消标签显然是关闭的。我希望它与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; 
    }

感谢您的帮助。

编辑：添加结束花括号代码后。

你的CSS似乎有一个明显缺乏的'}'。 – thirtydot

良好的捕获，但CSS是好的，我只是从萤火虫复制它。我会在这篇文章中解决这个问题。 CSS在应用程序中打开和关闭大括号。 – AdamT

答

尝试用行高使用

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

我会再次说，匹配高度线高对我来说比尝试使用填充更好。 – 2011-09-28 18:33:33

答

很简单。只需添加一些padding-top至.cancelLinkButton。从它的外观来看，你可能需要大约5px左右。

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

答

您正在将某个地方的CancelLinbutton属性设置为覆盖下面设置的某个地方。找出所有取消按钮的CSS引用，并查看实际使用的属性。您可以使用F12并查看哪些属性已应用，哪些已被覆盖。

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

锚定按钮标签不对齐

相关推荐