在twitter bootstrap nav-list中对齐文本

Question

我希望在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>分发

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/

Answer 2

<强> HTML：

   <ul class="nav nav-list">
      ...
    <li class="active"><a href="/"><label>All</label><span>100</span></a><div class="clr"></div></li>
    <li><a href="/mon/warnings/"><label>Warning</label><span>100</span></a><div class="clr"></div></li>
    <li><a href="/mon/errors/"><label>Error</label><span>100</span></a><div class="clr"></div></li>
      ...
    </ul>

<强> CSS：

.nav-list ul li a{ padding:5px 10px; display:block;}
.nav-list ul li a label{ cursor:pointer; display:block; float:left; width:80%;}
.nav-list ul li a span{ cursor:pointer; display:block; float:left; width:20%; text-align-right;}

.clr{ clear:both;}

注意：相应地调整标签左侧的文字宽度和跨度右侧的数字。

Answer 3

HTML：

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

CSS：

.num{
float: right;
}

我将您的<p>更改为<span>，因为这更有意义......然后在范围中添加了.nums类，然后向右浮动。