css - <div> 元素在移动设备上相互堆叠

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对于推特。如果有人能帮助我弄清楚为什么 Android 会以这种方式对齐事物，我将不胜感激。

Answer 1

将每一个的宽度设置得尽可能小。 从你的例子来看，每个元素的宽度都太大了，一个要移动的元素会被压低。这是我在没有真正看到完整内容的情况下看到的第一件事

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