如何在移动设备上将所有共享按钮集中到一行？答案

【问题标题】：How to bring all share buttons to one line on mobile device?如何在移动设备上将所有共享按钮集中到一行？
【发布时间】：2015-05-16 06:08:55
【问题描述】：

我正在尝试设置我的网站以在移动设备上正确显示的样式，但在每个页面帖子底部的“分享”按钮出现问题。

使用开发人员工具（chrome），我将设备更改为 iPhone 5，页面底部的橙色共享按钮被格式化，以便 3 个按钮与文本“共享此”和 3 个按钮位于同一行在一个新的线路上。我希望所有橙色按钮都位于文本下方的同一行。

这是它在移动设备上的外观：http://imgur.com/QBJyqsT

链接包含在类 ssba 中，并且是 URL，因此我尝试使用 .ssba a 和 .ssba img 的各种组合来选择它们 （都在 @media 查询选择器中），但我仍然无法将它们撞到新行。我尝试过更改宽度、大小等，但不知道如何将它们向下推。

如果有什么不清楚的地方请告诉我，我会尽力澄清。

谢谢！ :)

【问题讨论】：

【解决方案1】：

这可能不是最优雅的解决方案，但可以解决问题。你可以在第一个链接元素上添加一个伪选择器来创建一个这样的空间：

.ssba a:first-of-type:before {
    content: ' ';
    display: block;
}

关于跨浏览器的兼容性，:before 和 :first-of-type 都有很好的支持。见这里：http://caniuse.com/#search=%3A%3Abefore 和 http://caniuse.com/#feat=css-sel3

【讨论】：