如何在<li>对齐</li> <li> </li> </span>右侧的<span>

Question

我有一个班级'标签'from the bootstrap framework。我将此标签嵌套在<li>中，我希望它与<li>中的其他内容对齐。

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

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

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

有关如何让我的“新项目”跨度移至<li>右侧的任何提示？以下是我为展示目的而托管的网页的链接：a

Answer 1

给予label课程余量似乎有所帮助：

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

Answer 2

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

Answer 3

尝试使用位置相对

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

离。 http://prntscr.com/rbzpp

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

Answer 5

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