移动端视图下文本重叠HTML CSS问题 现有解决方案尝试无效

核心问题原因 #

页面出现文本重叠的核心原因是2个错误用法：

• 给文本容器设置了固定高度：.center固定250px、.paragraph固定200px，手机端屏幕窄，文本自动换行后总高度会超过你设定的固定值，超出的内容就会和下方元素重叠
• 容器内的<p>标签用了绝对定位：绝对定位的元素会脱离正常文档流，父容器无法感知它的实际高度，就算去掉固定高度，父容器也不会跟着内容自动撑开

还有几个小问题也会导致布局异常：

• 导航栏<ul>的CSS语法错误：width: 100%后面缺分号、display: inline block中间缺短横线，正确写法是inline-block
• 图片用了固定宽度337/338px，手机屏幕宽度不足时图片会超出屏幕，挤压布局
• 标题<h1>设了固定90px字号，小屏幕上会溢出或者换行后挤压下方导航

修复方案 #

把对应CSS改成下面的内容即可，不用绝对定位就能实现你要的对齐效果：

1. 替换.center和其子元素的样式 #

删掉原来的固定高度+绝对定位规则，用flex布局实现水平垂直居中：

.center {
  min-height: 250px; /* 把固定height改成min-height，保证最小高度的同时内容多了会自动撑开 */
  font-family: 'Meddon', cursive;
  font-size: 30px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 0 15px; /* 加左右内边距，小屏幕上文字不会贴边 */
  text-align: center;
}
/* 原来的.center p样式全部删除即可，无需额外配置 */

2. 替换.paragraph和其子元素的样式 #

同样去掉固定高度和绝对定位，调整对齐方式：

.paragraph {
  min-height: 200px; /* 固定height改min-height */
  padding: 20px 15px 20px 30%; /* 用内边距实现你要的左边30%留白效果，同时不会脱离文档流 */
}
/* 原来的.paragraph p样式全部删除，额外加宽度限制避免文本太宽 */
.paragraph p {
  max-width: 800px;
  margin: 0;
}

3. 修复导航栏<ul>的语法错误 #

ul {
  width: 100%;
  text-align: center;
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

4. 适配图片和标题的响应式效果 #

/* 图片自适应宽度，小屏幕自动缩放 */
img {
  max-width: 100%;
  height: auto;
}
/* 标题字号改成响应式，小屏幕自动缩小 */
h1 {
  text-align: center;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(40px, 12vw, 90px); /* 最小40px，最大90px，中间随屏幕宽度自动调整 */
}

5. 其他小修复 #

代码里的链接<a style="font-weight:bold" href="inserthere.html"</a>缺了右尖括号，改成<a style="font-weight:bold" href="inserthere.html"></a>即可。

改完之后不管是调大字体还是手机端浏览，内容都会自动撑开容器，不会再出现重叠问题。

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