css - 如何使引导导航中的跨度具有宽度：0px？

Question

我有一个类似于下面的引导导航

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <li>
                        <a href="about"><i class="icon-info"></i><span class="no-width">About</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

对于 .no-width 类，我将 css 设置为

    .no-width {
        width: 0px;
    }

然而，跨度最终有一个宽度：auto? 为什么会这样？如何使导航栏中的跨度没有宽度？

这是我在 chrome 中检查跨度时看到的计算样式

Answer 1

你可以试试

a span.no-width {
    width: 0px !important;
    display:inline !important;   
}

或者这个

div.container ul.nav li a span.no-width {
    width: 0px !important;
    display:inline !important;   
}

更新：

问题（问题不清楚）是从聊天/评论中意识到的其他问题，解决方案是：

CSS：

ul.nav li a span.no-width { 
    display: inline-block;
    width:0px;
}

JS：

$('span.no-width').animate({ 'display':'inline', 'width':'100px' },2000);

演示。

Answer 2

您可能想在您的 css 中尝试更多的特异性，例如：

.navbar .navbar-inner .container .nav span.no-width { width: 0px; }

或不那么受欢迎的：

span.no-width { width: 0px !important; }

Answer 3

你需要做：

span.no-width {
    width:0;
}

否则它将调用一个名为 no-width 的 div 不存在