Question

我正在使用Twitter的Bootstrap css创建一个基本的标签式导航，如下所示{＆＃34; Basica标签下的here。＆＃34;您会注意到活动标签没有下划线，这使它感觉它在前景中。当我使用完全相同的代码时，我的活动标签仍然带有下划线，这实际上破坏了效率。

我在这里创建了一个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>

我做错了吗？

Answer 1

丢失<small>代码并且工作正常。

Answer 2

正如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%;
}

事实上，正如少数online articles（and the MDN page）所暗示的那样，<small>已在HTML 5中重新用于表示精美版画，版权和法律印刷以及旁注。因此，无论如何，上述将是一种更合适的方式来实现您的风格。

Twitter引导程序：活动标签仍然带有下划线

2 个答案: