求助:WordPress网站移动端右侧存在额外空白问题
WordPress移动端右侧额外空白的解决办法
- 先删负边距:全局检查所有元素的CSS,把带
margin-left或margin-right负值的规则全部移除——这是移动端横向空白最常见的诱因,很多全屏布局的主题会用负边距,但小屏幕下很容易“撑破”视口。 - 修正元素宽度:别只看容器的100%宽度,检查子元素有没有用
width: 100vw或者固定宽(比如width: 1200px),把这类元素改成max-width: 100%,同时给所有元素加上box-sizing: border-box,确保内边距、边框不会额外占宽度:
* { box-sizing: border-box; }
- 全局锁死横向溢出:给
html和body也加上横向溢出隐藏,比只给容器加更稳妥:
html, body { overflow-x: hidden; width: 100%; }
- 排查插件/主题样式:有些滑块、表单类插件自带的移动端样式会偷偷超出视口,用浏览器F12开发者工具切到移动端视图,逐个禁用插件排查,找到问题后直接用自定义CSS覆盖掉违规样式。
- 精准定位溢出元素:如果以上都没用,用开发者工具的元素选择器,从外到内点击页面元素,看哪个元素的右侧超出了视口范围,直接调整它的宽度或边距就行。
内容的提问来源于stack exchange,提问作者newbie
相关产品推荐
相关产品推荐

