CSS：在列表项上对齐跨度元素

Question

我试图将按钮（span元素）对齐在List Item元素的同一行（最右侧）。但无论我在按钮的CSS上使用什么显示属性（内联块，内联），它总是最终显示在行下。 您可以在此处查看示例：http://theroadmap.co/strategy/

这是我的清单：

<ol class="rectangle-list">
<li class="tooltip" title="What does a startup CEO actually do?"><a href="http://www.forbes.com/sites/kylewong/2013/11/28/quantified-startup-what-does-a-startup-ceo-actually-do/">Quantified Startup </a></li>
<p>What does a startup CEO actually do?</p>

<li class="tooltip" title="How to find your competitive advantage"><a href="http://blogs.hbr.org/2013/07/be-the-company-customers-cant/">Be the Company Customers Can't Live Without</a></li>
<p>How to find your competitive advantage</p>

</ol>

这是我尝试在每个<li>元素末尾插入的按钮。

<!-- LikeBtn BEGIN -->
<span class="likebtn-wrapper" data-style="transparent" data-show_like_label="false" data-identifier="1" data-counter_show="false" data-popup_enabled="false" data-show_copyright="false" data-share_enabled="false"></span>
<script type="text/javascript" src="//likebtn.com/js/widget.js" async="async"></script>
<!-- LikeBtn END -->

＆＃39;

谢谢！ 担。

Answer 1

试试这个，将代码更改为这样。

将你的div（带有你的LIke按钮）放入你的李。然后将此css添加到您的代码中，添加到您喜欢的按钮。

.likebtn-wrapper.lb-loaded.lb-style-transparent.lb-popup-position-top.lb-popup-style-light {
    position: absolute;
    text-align: right;
    top: 1px;
    right: 0px;
    z-index: 999;
}

以下是您将获得的内容。

Answer 2

不确定是否适合您的其他网站样式，无法真正测试它，但可能尝试添加以下样式的.likebtn-wrapper类：

.likebtn-wrapper{
    margin-top:-28px;
    float:right;
}