html - twitter ブートストラップ 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

オプション 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;}

オプション 2: 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