页面底部出现横向滚动条 overflow-x移除后布局错乱如何解决

页面出现横向滚动条的核心原因是相对定位+left偏移的写法让元素溢出了视口宽度：

• 你给.title设置了left: 80px、给.cta按钮设置了left: 65px，相对定位的元素发生偏移时，它原本在文档流中占据的位置不会改变，偏移出去的部分会超出视口边界，浏览器就会生成X轴滚动条用来展示溢出内容
• 直接加overflow-x: hidden会强制裁剪所有超出容器宽度的内容，相当于把偏移出去的标题、按钮部分直接切掉，看起来自然就布局错乱了。
• 代码里还有两处不符合HTML规范的写法，后续也可能引发布局异常：一是<text>不是标准HTML标签，二是交互元素<button>不能嵌套在<a>标签内部，会导致点击事件、默认样式冲突。

1. 替换偏移实现方式，把left偏移改成外边距控制，从根源消除溢出：

.title {
  font-size: 240%;
  position: relative;
  /* 删除原代码的 left: 80px; */
  margin-left: 80px; /* 用左外边距实现左侧偏移，元素完全在文档流内计算宽度，不会溢出 */
  top: 120px;
  color: white;
}

.cta {
  background: #834bef;
  position: relative;
  top: 160px;
  /* 删除原代码的 left: 65px; */
  margin-left: 65px; /* 同理替换为左外边距 */
  font-size: 1.5rem;
}

2. 修正不规范HTML结构：
   • 把包裹标题的<text class="text">替换为标准块级标签，比如<div class="text">
   • 删除<a>标签内部嵌套的<button>，直接给<a>标签加对应按钮样式即可，避免标签嵌套违规。
3. （可选）加全局兜底样式，彻底避免意外横向滚动：

body {
  overflow-x: clip;
}

这个属性比overflow-x: hidden更适合做兜底：它只会裁剪完全超出视口的异常溢出内容，不会影响固定定位、粘性定位元素的渲染，也不会破坏页面正常滚动逻辑。

内容的提问来源于stack exchange，提问作者grozan programer