css - 我如何拥有一个内对齐到右侧

Question

我有一个来自引导框架的类“标签” 。我有这个标签嵌套在 a 中<li>，我希望它与<li>.

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

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

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

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

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%。当图像的大小（高度）增加时，此代码甚至可以更好地工作。