CSS：在列表项上对齐 Span 元素答案

【问题标题】：CSS: Align Span Element on List ItemCSS：在列表项上对齐 Span 元素
【发布时间】：2014-02-10 02:49:42
【问题描述】：

我正在尝试将按钮（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 -->

谢谢！担。

【问题讨论】：

会让like按钮有显示样式：inline-block;帮忙？
问题是你没有空间来内联阻止你喜欢的按钮。例如，如果您有一个宽度为 400 像素的 div，然后是您的数字，然后是填充其余空间的内容，那么您可以将 Like 按钮放在哪里。使您的包装盒更大，而您的工具提示框更小，这样您就可以内嵌喜欢的按钮。
我还不能发表评论，所以......我认为你想要这样的东西尝试将跨度放在 div 元素中，然后将将div 设置为display:table;float:right; 希望对您有所帮助。
此外，您的 Ordered 列表中有一个 div 和 LI 。将 Div 放入有序列表中。

标签： html css list alignment

【解决方案1】：

试试这个，把你的代码改成这样。

把你的 div（用你的 Like 按钮）放在你的 li 里面。然后将此 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;
}

你会得到什么。

【讨论】：

感谢凸轮的快速回答！我通过将like按钮放在li元素中来尝试这个，但是当我把上面的css放在custom.css中时，整个包装器和按钮都消失了。经过检查，它似乎将按钮移动到页面顶部的某处（删除“位置：绝对”将其带到列表元素下方）。我确定这只是我做错了什么......上面的图片正是我的目标！干杯！
我刚刚检查了您的代码，一切正常，但您的 DIV 在 LI 之外。这是动态代码还是静态代码。如果它是动态的，您可以向您的问题发布如何将代码附加到您的 LI 中，以便我可以帮助您。
顺便说一句，您的屏幕右侧有一个巨大的间隙。看起来你有一个流体布局，但你的屏幕尺寸是固定的。这两个不代表彼此。流畅的布局应该使用 % 作为宽度，而不是像 1920px 这样的固定元素宽度。
嗨，Cam，你说得对，我的 html 搞砸了！我找到了写这篇文章的正确方法：'
bmnow.com/zen-innovation-and-startup-ideation " target="_BLANK">The Art of Finding Business Startup想法

酷，很高兴我能帮上忙。

【解决方案2】：

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

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

【讨论】：

这行得通，但如果他在其他任何地方添加点赞按钮，它可能无法提供他想要的相同功能。
@Cam 当然你的观点是正确的，这就是为什么我说我不确定这将如何与网站的其他部分一起使用。我猜 OP 可以为这种特定情况使用一个单独的类，但另一方面，没有人真正知道该 html 代码是如何生成的。
我假设他在
之后添加了一个类似按钮功能，但在他的 OL 内部。他将需要更改该 DIV 的发布位置。这没有任何意义，因为他说 span，但在他发布的网站上作为示例，他有一个 Div，然后是他的 span。

谢谢大家！使用的插件的开发者默认跨度不是div：' ' 我可能错误地将它们更改为 div，而它应该是跨度。