5

我想让文本在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>元素
4

3 回答 3

1

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;}

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

于 2013-03-28T05:13:31.360 回答
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/

于 2013-03-27T18:42:08.643 回答
0

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在跨度中添加了一个类，然后向右浮动。

于 2013-03-27T18:43:30.000 回答