You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助: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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 22:49:51