我正在尝试将我的网站设置为在移动设备上正确显示，并在每个页面底部的“共享”按钮遇到问题。
使用开发者工具（chrome），我将设备更改为iPhone 5，页面底部的橙色共享按钮被格式化，以便3个按钮与文本“共享此”和3个按钮位于同一行正在换行。我希望所有的橙色按钮都在文本下方的同一行。
这就是它在移动设备上的显示效果：http://imgur.com/QBJyqsT
以下是该网站的网址：http://50.87.248.154/~thetinat/eco-tips/
链接包含在 ssba 类中，并且是URL，所以我尝试使用 .ssba a 和 .ssba img的各种组合来选择它们（都在@media查询选择器中）但仍然无法将它们降低到新行。我已经尝试过更改宽度，尺寸等，但无法弄清楚如何将它们推下来。
如果有任何不清楚的地方，请告诉我，我会尽力澄清。
谢谢！ ：）
答案 0 :(得分：2)
这可能不是最优雅的解决方案，但它可以解决问题。 您可以在第一个link-element上添加一个伪选择器来创建一个这样的空格：
.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