css - 与段落文本内联显示 Facebook 类似框

Question

我想显示一个带有计数的类似框，以便它在此处显示为我的文本[Like] <[2000]

默认情况下，like 框位于新行上，因此显示为

My text here
[Like] <[2000]

目前，我使用 CSS 来相对定位 div，代码如下：

<p><strong>My text here</strong></p>
<div class="fb-like" data-href="https://www.facebook.com/FacebookDevelopers" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"
style="position:relative; top:-36px; left:230px;"></div>

有没有更好的方法来做到这一点？

Answer 1

您给定的链接工作正常，您只需要在<P>标签上添加以下 css 属性，还需要添加 cssclear属性，例如：

<p style="float: left;margin-right: 10px;"><strong>My text here</strong></p>

请检查以供参考

http://jsfiddle.net/ktzxN/3/

希望有效！！！！

Answer 2

请在以下链接中找到多行文本的解决方案！

http://jsfiddle.net/ktzxN/4/

现在这个布局变成了 Liquid，你可以在任何分辨率上使用这个布局。！！！！！！

高压乐趣:-)

Answer 3

嘿，现在习惯了这段代码并根据您的布局定义父 div 的宽度或高度

    <p><strong>My text here</strong></p>
    <div style="display:inline-block;
vertical-align:top;
position:relative;
width:200px;
height:100px;
">
    <div class="fb-like" data-href="https://www.facebook.com/FacebookDevelopers" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"
    style="position:absolute;
 top:0; 
left:0;">
</div>
    </div>