【发布时间】：2021-12-18 08:58:15
【问题描述】：
该网站在我的笔记本电脑上看起来不错，但是当我在手机上查看时，这三个文本重叠。我尝试使用 span 响应式换行符并将 @media 添加到 css - 基于其他用户的一些类似但不相同的问题 - 但是重叠仍然存在。有什么建议？这是没有任何尝试更改的相关代码。
编辑：作为一项实验，我将其中一个文本更改为非常大的字体，这导致大字体文本与笔记本电脑上的其他两个文本重叠。我很清楚编码，但这让我认为这是我决定使用 div 的问题？帮助！ 编辑：这是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Meddon&display=swap" rel="stylesheet">
<style>
body {
background-color:#E6D3A3;
}
h1 {text-align: center; font-family: 'Great Vibes', cursive;}
ul {
width: 100%
text-align: center;
display: inline block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline-block;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: gray;
}
div {
-webkit-background-size: contain no-repeat;
-moz-background-size: contain no-repeat;
-o-background-size: contain no-repeat;
background-size: contain no-repeat;
}
.center {
position: relative;
height: 250px;
font-family: 'Meddon', cursive;
font-size: 30px;
}
.center p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.paragraph {
position: relative;
height: 200px;
}
.paragraph p {
position: absolute;
top: 20%;
left: 30%;
transform: translate(-20%, -20%);
margin: 0; }
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
<title> Home </title>
</head>
<body>
<h1 style="font-size:90px"> home page</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news"> Tours</a></li>
<li><a href="#contact">About Shirley</a></li>
<li><a href="#about">Contact & Web links</a></li>
</ul>
<img src="mont.jpg" width="337" height="210">
<img src="ro.jpg" width="337" height="210" >
<img src="mo.jpg" width="338" height="210" >
<div class="center">
<p> more text here</p> </div>
<div class="paragraph">
<p> Step back in time with Shirley Midyette more text etc etc long paragraphStep back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph Step back in time with Shirley Midyette more text etc etc long paragraph <a style="font-weight:bold" href="inserthere.html"</a>
</p> </div>
<div id="footer">
<p>Copyright © 2021 my website LLC. All rights reserved</p> </div>
</body>
</html>
【问题讨论】：
-
无法用给定的代码重现您的问题。请提供完整代码。
-
非常感谢您的评论 - 我提供了整页的代码。
标签： html css mobile overlap divide