1

我在水平对齐我的社交图标按钮时遇到了一些问题，并且没有找到对我的问题的任何令人满意的回应。

我有“Facebook”、“Twitter”和“Linkedin”按钮，但当我尝试用 CSS 代码更改它时，“Facebook”按钮似乎没有反应。

我只希望“Facebook”按钮与“Twitter”和“Linkedin”按钮对齐。

这是我的 PHP 文件中的 PHP 代码：

<div id="fb-root"><hr/></div>
<div class="fb-like" data-send="false" data-href="<?php the_permalink()?>" data-layout="button_count" data-width="100"data-show-faces="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
</script>
<script type="IN/Share"></script>

以下是我放入 CSS 文件中的 CSS 代码：

.fb-like{float:left;display:block;}
.twitter-share-button{float:left;}

这是帖子末尾我的问题的一个示例：

发布问题

我提前感谢您的帮助，

问候，

4

3 回答 3

11

我发现最简单的方法是将每个单独的社交插件包装在一个 div 中，然后浮动这些 div 而不是尝试浮动插件。然后，您甚至可以应用宽度和填充以及所有内容，以准确定位它们。

于 2013-10-05T00:23:39.290 回答
1

对于水平布局，您可以尝试使用内联样式。将每个项目的显示设置为 inline-block ，如下所示：

.fb-like{display:inline-block;}
.twitter-share-button{display:inline-block;}

然后，您可以使用 vertical-align css 属性告诉它们根据顶部、底部或中间对齐。像这样：

.fb-like{display:inline-block;vertical-align:top;}
.twitter-share-button{display:inline-block;vertical-align:top;}

此外，为了使这些 css 属性起作用，您必须设置位置并删除属性：

float: left;

用这个设置位置属性：

position:static;

或这个

position: relative;
于 2013-10-04T13:14:35.147 回答
1

我遵循了@KateNickerson 的建议，但我还必须为 facebook 共享按钮添加 100 像素的固定宽度才能正确显示内联。

<div style="width: 100px;float:left">
    <div class="fb-share-button" data-href="http://.../" data-layout="button_count"></div>
</div>

<div style="width: 100px;float:left; margin-top: 2px;">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
于 2015-06-26T10:31:54.640 回答