html - 在 twitter bootstrap 导航列表中对齐文本

Question

我想让文本在同一个 <li> 中左右对齐nav-list 中的元素推特 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>元素

Answer 1

选项一:更改标记:

只需稍微更改您的标记即可。把 <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:

否则如果 <p>需要在 anchor 标记内，然后你可以做这样的事情。

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

p{ float:right;}

示例: (注意我在示例中使用了 css 重置)

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