Question

我正在尝试为我的网站添加社交媒体（如facebook，twitter和linkedin）的分享按钮，但我在Android设备上收到了一些奇怪的结果。我想要设置按钮的方式是一条直线并排。在Firefox，Chrome和Internet Explorer中，按钮都按照我希望的方式排列。然而，在我的Android设备上，facebook按钮（它们是div）叠加在一起，而第一个标签在它们之后。我使用facebook，twitter和linkedin提供的代码来创建这些按钮。

代码看起来像这样：

<div id="social_links">
    <div class="fb-like" otherdata></div>
    <div class="fb-share-button" otherdata></div>
    <a class="twitter_share_button" otherdata></a>
    <a class="tiwtter_follow_button" otherdata></a>
    <linkedin button>
    <email button>
</div>

正如我所说，在桌面浏览器中，这些链接都是按照我想要的水平线出现的，但是在我的Android设备上，Facebook的按钮堆叠在facebook分享按钮的顶部，并且堆叠在Twitter的顶部分享按钮。

以下是包含所有内容的div的CSS：

#social_links {
    float: right;
    margin-right: 10px;
    display: block;
}

如果我没有充分解释我想要看的东西，我希望它们的布局如下：

<div> <div> <a> <a> <button> <button>

以下是他们在Android上的表现：

<div>
<div>
<a> <a> <button> <button>

我从https://developers.facebook.com/docs/plugins/share-button/和https://developers.facebook.com/docs/plugins/like-button为facebook生成了我的按钮代码，为https://about.twitter.com/resources/buttons为twitter生成了代码。如果有人能帮我弄清楚为什么Android会以这种方式调整对象，我会非常感激。

Answer 1

将每个的宽度设置得尽可能小。从您的示例中可以看出，每个元素的宽度太大，而移动的宽度则会被推下。这是我第一眼看不到真正的东西

另外，我希望你关闭标签，这也可能是原因

<div>元素在移动设备上堆叠在一起</div>

1 个答案: