我的JSP显示一个按钮,如下所示:
<div id="verify" style="position:relative;height:50px;">
<a id="key_verify" class="generic_link" href="#">
<span class="verify_span">Verify</span>
</a>
</div>
样式表如下所示:
span.verify_span {
background: url("/images/normal.png") repeat-x scroll 0 0 transparent;
color: #000000;
display: inline-block;
float: left;
font-family: Arial;
font-size: 14px;
font-weight: bold;
line-height: 41px;
margin-top: 20px;
padding: 0 20px;
}
a.generic_link {
text-decoration: none;
}
JS如下所示:
$("#key_verify").click(function () {
...// perform task
}
当我点击键盘上的标签时,它指向其他地方&amp;不是完全在确切的按钮上,而是仅在文本“验证”上。如果您观察其他网站上的标签,通常它会在按钮的边框上显示虚线,但在我的情况下,它仅在文本“验证”上显示虚线
如何让我的标签在整个按钮上正确显示?
谢谢!
答案 0 :(得分:0)
CSS中的float:left
使得span相对于包含它的<a>
浮动。由于<a>
没有其他内容,因此它正在崩溃,浏览器使其无法解决。
由于您已经在创建跨度内联块,因此没有理由让它成为float:left
。
就个人而言,我建议你不要做所有这些层。您可以使用<a id="key_verify" href="#">Verify</a>
离开并完成CSS中的所有其余工作。它更清洁。
答案 1 :(得分:0)
将display:block添加到span.verify_span