在 twitter bootstrap nav-list 中对齐文本答案

【问题标题】：Align text within twitter bootstrap nav-list在 twitter bootstrap nav-list 中对齐文本
【发布时间】：2013-03-18 00:06:09
【问题描述】：

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

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

这是它的外观：

编辑： 谢谢大家的回复。以这种方式解决了这个问题：

将 替换为
将class="clearfix" 添加到<li> 元素

【问题讨论】：

在同一个 <li> 内或在同一个 <ul> 内但每个 <li> 不同？
在同一个<li>内：链接就像一个字符串，单词在左边，数字在右边。
引导类text-right 将为float:right 添加text-align:right 或pull-right。添加左而不是右以获得相反的效果。
我试过这个，没有运气。看图片：文字对齐正确，但有点像楼梯，我需要一个数字在另一个之下。
通过将class="clearfix" 放入<li> 元素解决了这个问题。但现在我在列表元素之间有边距（默认高度为 26px，clearfix 使其为 33px）

标签： html css twitter-bootstrap alignment

【解决方案1】：

选项一：更改标记：

只需稍微更改您的标记即可。将 放在锚标记之外。

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

否则，如果在锚标记内需要，那么您可以这样做。

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

p{ float:right;}

示例： （请注意，我在示例中使用了 CSS 重置）

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

【讨论】：

可能。如果是这样，那么问题是锚标记需要显示块宽度 100%；并且列表需要重置，因此浏览器不会添加不必要的填充和边距。你可以看到它在我的小提琴中工作。
我不知道为什么我们会在这种情况下使用。
是的， 不是必需的。您在 上的观点是正确的。我只是使用它，因为那是他所拥有的。
我使用了，因为官方文档是这么说的：用.navbar-text 将文本字符串包装在一个元素中，通常在一个
标记上以获得正确的前导和颜色。
技术上没有错。在我看来，这有点主观。从语义的角度来看，我填写 在这种情况下更有意义，因为 通常用于段落类型的内容。但无论如何，您的问题与 HTML 元素无关，而是与 CSS 有关。

【解决方案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;}

注意：相应调整label左侧文字的宽度和span右侧的数字宽度。

【讨论】：

【解决方案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;
}

我将您的  更改为 ，因为这样更有意义...然后在 span 中添加了一个 .nums 类，并向右浮动。

【讨论】：