我遇到了链接大小的问题。 我不知道如何让它变小，每当我这样做时。我最终让它移动或消失。 我按照Danni Crossing的教程，关于如何制作下拉菜单。但问题是...按钮点击范围太大，我只想让它更小。
@font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 20px;
}
.WHAT {
font-size: 55px;
position: relative; left: 555px; bottom: 20px;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li><a href="addimage.html">ADD IMAGE</a></li>
<li><a href="addidle.html">ADD IDLE</a> </li>
<li><a href="appearence.html">APPEARENCE</a></li>
<li><a href="settings.html">SETTINGS</a></li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>您需要更改 .导航更改height: 60px; padding-bottom: 15px;和更改 .ul li 中的line-height: 23px;更改 .哇和.什么
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
@font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 60px;
background-color: #b5a371;
padding-bottom: 15px;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li><a href="addimage.html">ADD IMAGE</a></li>
<li><a href="addidle.html">ADD IDLE</a> </li>
<li><a href="appearence.html">APPEARENCE</a></li>
<li><a href="settings.html">SETTINGS</a></li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>从.WOW.WHAT.HOW中删除了position: relative; right: 255px; bottom: 20px;，从nav ul li a中删除了padding: 22px 320px;，现在看起来更好了。不过，CSS的其余部分非常混乱。
@font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
}
.WHAT {
font-size: 55px;
}
.HOW {
font-family: atlantis;
color: black;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li><a href="addimage.html">ADD IMAGE</a></li>
<li><a href="addidle.html">ADD IDLE</a> </li>
<li><a href="appearence.html">APPEARENCE</a></li>
<li><a href="settings.html">SETTINGS</a></li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>