在twitter bootstrap nav-list中对齐文本

Question

我希望<li>在nav-listTwitter Bootstrap 的同一元素内左右对齐文本.这是我的代码:

<ul class="nav nav-list">
  ...
  <li class="active"><a href="/">All<p class="pull-right">100</p></a></li>
  <li><a href="/mon/warnings/">Warning<p class="pull-right">100</p></a></li>
  <li><a href="/mon/errors/">Error<p class="pull-right">100</p></a></li>
  ...
</ul>

以下是它的外观:

编辑: 谢谢大家的回复.以这种方式解决了这个问题:

• 替换<p>为<span>
• 添加class="clearfix"到<li>alements

Answer 1

选项一：更改标记：

只需稍微更改一下您的标记即可。将<p>锚标记放在外侧。

<ul class="nav nav-list">
  <li class="active"><a href="/">All</a><p class="pull-right">100</p></li>
  <li><a href="/mon/warnings/">Warning</a><p class="pull-right">100</p></li>
  <li><a href="/mon/errors/">Error</a><p class="pull-right">100</p></li>
</ul>


.pull-right {float:right;}

选项二：更改 CSS：

否则，如果<p>锚标记内部需要，那么您可以执行类似的操作。

a { 
display:block;       
width:100%;
}

p{ float:right;}

示例：（ 请注意，我在示例中使用了 css 重置）

http://jsfiddle.net/vRSMZ/1/