我开始为一个硬币计数网站制作登陆页面，但是没有任何原因，我有一个底部x滚动条，但是当我试图用overflow-x删除它时，它把一切都搞砸了。我认为是标题导致滚动条出现，但IDK为什么或什么样式导致它。我几个星期前才开始工作，所以我知道的不多。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li><a href="about.html">about</a></li>
<li><a href="donate.html">donate</a></li>
<li><a href="#">home</a></li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<a href="main.html"><button class="cta" type="button">Try Now!</button></a>
</body>
</html>请尝试下面我粘贴的代码，我希望它会像预期的那样工作。
让我告诉你是什么问题-position: relative"为"title"类导致问题。
使用font-size以像素为单位，而不是像你这样使用百分比。要调整内容，一定要确保使用空格，如边距和内边距。
快乐编码。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 30px;
margin-top: 60px;
margin-left: 60px;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li><a href="about.html">about</a></li>
<li><a href="donate.html">donate</a></li>
<li><a href="#">home</a></li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<a href="main.html"><button class="cta" type="button">Try Now!</button></a>
</body>
</html>你是正确的，标题类导致了一个问题。
它被赋予了一个左边的位置。但是它仍然是默认的display: block——额外的滚动部分是由left: 80px
引起的。这个代码片段给出了display: inline-block:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
display: inline-block;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li><a href="about.html">about</a></li>
<li><a href="donate.html">donate</a></li>
<li><a href="#">home</a></li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<a href="main.html"><button class="cta" type="button">Try Now!</button></a>
</body>
</html>你正在为title标签设置left属性，它将内容从左侧移动到右侧，因此它需要显示一个水平滚动条来查看从查看区域移动的内容。
您可以通过将left属性更改为margin-left来解决这个问题，就像下面的代码
.title {
font-size: 240%;
position: relative;
margin-left: 80px;
top: 120px;
color: white;
}
或者，你可以通过减少它的移位值来设置标题的宽度，就像下面
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
width: calc(100% - 80px);
}