<div> 元素在移动设备上相互堆叠答案

【问题标题】：<div> elements stacking on one another on mobile device<div> 元素在移动设备上相互堆叠
【发布时间】：2014-04-19 02:16:44
【问题描述】：

我正在尝试将 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 like 按钮堆叠在 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 会以这种方式调整事物，我将不胜感激。

【问题讨论】：

标签： css facebook html alignment

【解决方案1】：

将每个宽度设置为尽可能小。从您的示例中可以看出，每个元素的宽度都太大了，而一个要移动的元素会被推下。这是我在没有真正看到完整的情况下看到的第一件事

另外，我希望你关闭标签，这也是为什么

【讨论】：

不幸的是，没有这样做。我还尝试取消浮动：正确，因此元素将从左边框开始，但这也无济于事。是的，我确实关闭了我的标签，我写的方式是为了简洁。