html - 在Twitter引导导航列表中对齐文本

我想在Twitter Bootstrap的<li>中的同一nav-list元素内使文本左右对齐。这是我的代码:

<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>元素

最佳答案

选项一:更改标记:

只需稍微更改您的标记即可。将<p>放在 anchor 标记之外。

<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:

否则，如果 anchor 标记中需要<p>，则可以执行以下操作。

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

p{ float:right;}

示例:(请注意，我在示例中使用的是CSS重置)

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

关于html - 在Twitter引导导航列表中对齐文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15666816/