为什么我不能为导航标签设置宽度

Question

我有 div 大小的导航col-md-4，我有 6 个选项卡，我无法对齐所有选项卡。

当我更改文本选项卡的字体大小时，我可以对齐，这对我来说不是一个好的解决方案。

我试图为每个标签设置宽度，但不起作用。如何将某些选项卡的宽度设置为小但其次设置为更大。

当我悬停在导航栏的末尾时，我也有填充

http://i.imgur.com/9Px4qqk.png

        <nav class="row">
            <ul class="nav nav-tabs">
                <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-user"></span> Name &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> </a></li>
                <li><a href="#"><span class="glyphicon glyphicon-flag"></span>Text Link </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-envelope"></span> Message </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-oil"></span>10 </a> </li>
                <li class="tab5"><a href="#"><span class="glyphicon glyphicon-asterisk"></span> </a> </li>
                <li><a href="#"><span class="glyphicon glyphicon-home"></span> </a> </li>
            </ul>



    </div>

CSS

.nav-tabs li .tab5{

    width:4%;
}

Answer 1

你的选择器错了，你必须这样做：

.nav-tabs li.tab5 {
    width: 4%;
}

类.tab5在li标签上，因此您必须将它们连接起来。

工作示例

更新

如果您想将所有内容放在一行中，请尝试使用填充，如下所示：

.nav>li>a {
    padding: 10px 3px;
}

更新示例