`nav`中的额外文本

Question

我正在使用Twitter Bootstrap，需要将此垂直导航转换为水平和更小的东西：

我想通过使用两个NAV来实现这一点，每个NAV都有前面的部分文本。基本上，像这样：

  

培训：获得认证，培训员工，学习打包，指导和实践培训，NASMM FrontDoor培训

     

拓展业务：公开演讲2.0，演示文稿

我正在使用此代码：

<ul class="nav nav-pills">
  <li>HELLO</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

但得到这个结果：

有没有办法在HELLO（部分主题）正确显示时执行此操作？

Answer 1

将列表项设置为显示内联块，这样它们是水平显示而不是垂直显示，您可能需要为它们添加一些额外的边距和/或填充。

.nav li{
    display: inline-block
}

jsfiddle

Answer 2

好像你在

上放了正确的CSS代码

nav li a。 { }

但你需要把这段代码放在

上

nav li { }