2

我正在使用 twitter 的 Bootstrap css 创建一个基本的选项卡式导航，如此处“基本选项卡”下所示。您会注意到活动选项卡没有下划线，这使它感觉像是在前台。当我使用完全相同的代码时，我的活动选项卡仍然带有下划线，这确实破坏了有效性。

我在这里创建了一个 JSFiddle：http: //jsfiddle.net/s_d_p/nRB5t/1/

这是HTML：

<div class="row" style="width:960px;">          
        <ul class="nav nav-tabs span12">
            <li class="text-center active"><a href="howitworks.php" class="">HOW IT WORKS</a></li>
            <li class=" text-center"><a href="#" class=""><small>Login</small></a></li>
            <li class=" text-center"><a href="" class=""><small>Join</small></a></li>
        </ul>
    </div>

难道我做错了什么？

4

2 回答 2

3

丢失<small>标签，它工作正常。

于 2013-06-27T23:59:40.697 回答
1

正如Rob回答的那样，删除小标签将更正它。如果您想保留样式，您可以更改非活动菜单项的锚样式的字体大小（并将其设置为活动菜单项的 def 100%，使其保持适当的大小）：

.nav-tabs > li > a {
    font-size: 85%;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {

    font-size: 100%;
}

事实上，正如一些在线文章（和 MDN 页面）所暗示的，<small>在 HTML 5 中已重新用于指示精美印刷、版权和法律印刷以及旁注。因此，无论如何，上述方法都是实现您所追求的样式的更合适的方法。

于 2013-06-28T01:55:18.693 回答