Question

如何正确对齐社交页脚和页脚菜单？我尝试将社交页脚对齐为三行，第一行是图标，第二行和第三行是底部的文本。但是，当我重新调整屏幕大小时，图标会出现行为异常。

在页脚菜单中，我只想在一行显示。无论屏幕大小如何，我都想保留所有移动设备的页脚设计。

以下是链接：http://mobiletest.me/google_nexus_6/2507045和jsfiddle

这是媒体查询的CSS

.hcsocialslitwitter, .hcsocialslifb, .hcsocialslilinked, .hcsocialslics, .hcsocialslic{ margin: 0 !important; width: 30%; }
.hcsocials{ margin: 0; padding: 0; }
.hcsocialspfb{ margin: 1px 0 19px -90px !important; }
.hcsocialspcollections, .hcsocialspcustomer, .hcsocialsptwitter, .hcsocialsplinked{ margin: 1px 0 19px -80px !important; }
.bottom-menu{ float: none; margin: -20px 100px 5px auto; }
.copyrighttext{ margin: -45px 0 0 170px; float: left; }
.footerimg{ margin: 10px 0 0 70px; }
.footer #middle-footer{ padding: 20px 0 10px 0; }

Answer 1

使用媒体查询应该修复它。

@media only screen and（max-width：500px）{

如果您不知道如何结帐http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如何正确对齐社交页脚和页脚菜单？

1 个答案: