如何让 <li> 中的 <span> 与 <li> 的右侧对齐答案

【问题标题】：How to I have a <span> within a <li> align to the right side of the <li>如何让 <li> 中的 <span> 与 <li> 的右侧对齐
【发布时间】：2013-01-17 22:00:03
【问题描述】：

我有一个类“标签”from the bootstrap framework 的跨度。我有这个标签嵌套在<li> 中，我希望它与<li> 中的其余内容对齐。

在我尝试修改 css 之前，我的 li 看起来像这样（橙色的“新项目”是标签）：

如果我尝试float: right，标签会向右移动，但位于<li> 的右上角，如下所示：

您还可以看到新项目标签在一种情况下被推到下一行 - 我认为这是一个不相关的问题。

关于如何让我的“新项目”跨度移动到我的 <li> 右侧的任何提示？这是我为演示目的而托管的页面的链接：a

【问题讨论】：

使用class= "pull-right"

标签： css twitter-bootstrap alignment

【解决方案1】：

<li class="row-fluid">
  <div class="span9">Description of item 1</div>
  <span class="offset1 span2 label pull-right">new item</span>
</li>
<li class="row-fluid">
  <div class="span9">Description of item 2</div>
  <span class="offset1 span2 label pull-right">new item</span>
</li>

<li class="row-fluid">
  <div class="span9">Description of item 1</div>
  <div class="offset1 span2 btn btn-large">new item</div>
</li>
<li class="row-fluid">
  <div class="span9">Description of item 2</div>
  <div class="offset1 span2 btn btn-large">new item</div>
</li>

<li class="row-fluid">
  <div class="span9">Description of item 1</div>
  <span class="offset1 span2 label">new item</span>
</li>
<li class="row-fluid">
  <div class="span9">Description of item 2</div>
  <span class="offset1 span2 label">new item</span>
</li>

【讨论】：

这仍然会将标签向上推到“右上角”，而不是像上面第二张图片那样向右滑动。
。 . .嗯，爆炸得很快。当您如此迅速地提供如此多不同的编辑时，我不确定该怎么办。这些选项都不能完全满足我的需要——它们似乎也“炸毁”了我的标签。我很感激我来这里寻求答案的努力 - 但下次不要尝试“霰弹枪”方法？
当然，其实我自己也在尝试这些方法，等待最好的方法

【解决方案2】：

上课label 保证金似乎有帮助：

span.label {
  float: right;
  margin: 10px;
}

【讨论】：

优雅 - 我使用 margin-top: 10px; 和引导类 pull-right
您可能需要更正“spant.label”中的错字以供将来参考——我无法对您的帖子进行如此细微的修改。
优雅，但没有解决他的双标问题。

【解决方案3】：

尝试相对位置

span.label{
float: right;
position:relative;
top:5px;
}

例如。 http://prntscr.com/rbzpp

【讨论】：

【解决方案4】：

这仅使用 css 就解决了您的所有问题。

.label-warning, .badge-warning {
    background-color: #f89406;
    float: right;
    margin-top: 9px;
}
.product_summary {
    clear: both;
}
.product_summary img {
    float: left;
}
.name, .price {
    float: left;
    line-height: 37px;
}

【讨论】：

【解决方案5】：

您可以使用边距将按钮从顶部放置在中间。另一个您可以使用相同的位置，例如position:absolute; right:0; top:45%。当图像的大小（高度）增加时，此代码甚至可以更好地工作。

【讨论】：