javascript - 选项卡焦点未正确显示

Question

我的 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
 }

当我单击键盘上的选项卡时，它指向其他地方，而不是完全指向确切的按钮，而是仅指向文本“验证”。如果您观察其他网站上的选项卡，通常它会在按钮的边框上显示虚线，但在我的情况下，它仅在文本“验证”上显示虚线

如何使我的选项卡正确显示在整个按钮上？

谢谢!

Answer 1

float:left在你的 CSS 中使 span 相对于 <a> float 包含它。自 <a>没有其他内容，它正在崩溃，并且浏览器使其无法显示。

既然你已经制作了 span 内联 block ，那么真的没有理由再制作它 float:left .

就我个人而言，我建议您不要做所有这些层。你可以逃脱 <a id="key_verify" href="#">Verify</a>并在 CSS 中完成所有其余工作。它更干净。