如何让<span>标签在<li>标签内右对齐？

Question

我有一个类为“label”的span 来自bootstrap框架。我将此标签嵌套在<li>中，并希望它与<li>中的其他内容右对齐。

在修改CSS之前，我的li如下所示（橙色的“new item”是标签）： 如果我尝试使用float:right，则标签会向右移动，但位于<li>的右上角，如下所示： 您还可以看到，在某些情况下，“新项目”标签会被推到下一行-我认为这是一个不相关的问题。

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

- Ecnalyr

---

使用 class="pull-right"。 - Patt Mehta

Answer 1

给 label 类添加 margin 属性似乎有帮助：

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

- j08691

---

优雅 - 我使用了 margin-top: 10px; 和 Bootstrap 类 pull-right。 - Ecnalyr

你可能想要更正“spant.label”中的拼写错误以供将来参考--我无法对您的帖子进行如此微小的编辑。 - Ecnalyr

优雅，但不能解决他的双标签问题。 - keyboardSmasher

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>

- Patt Mehta

---

这仍然会将标签推到“右上角”，而不仅仅是像上面第二张图片中所看到的那样向右滑动。 - Ecnalyr

好吧，这爆炸得真快。当您如此迅速地提供如此多不同的编辑时，我不确定该怎么做。这些选项都不能完全满足我的需求 - 它们似乎都会“炸掉”我的标签。我很感激您的努力，因为我确实来这里寻找答案 - 但下次请尝试减少“散弹枪”式的方法？ - Ecnalyr

当然，实际上我正在尝试这些方法，只是在等待最好的一个。 - Patt Mehta

Answer 3

尝试使用相对定位（position relative）。

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

ex. http://prntscr.com/rbzpp

的意思是在 HTML 中添加一个链接，链接的文本为“link1”，链接的 URL 为“http://prntscr.com/rbzpp”。

- Mirko Mukaetov

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

- keyboardSmasher

Answer 5

您可以使用margin属性将按钮从顶部居中对齐。另外，您也可以使用position属性，例如position:absolute; right:0; top:45%。当图片的尺寸（高度）增加时，这段代码甚至可以更好地工作。

- Rajnish Bakaria