我确定这是一个简单的修复，但....我一直在尝试使整个按钮可以点击，但我只是想弄明白。我用链接附上了整个按钮，只有文字是超链接的....任何想法？正如你所看到的，我一直试图让它适合移动设备，这也就是重复按钮的原因。
这是我的代码：
<head>
<style>
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 700px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
margin-top:150px;
}
h2 {
color: #525252;
font-size: 40px;
letter-spacing: 1px;
text-align: center;
}
h3 {
color: #1c86ee;
font-size: 25px;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
padding-bottom: 7px;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
margin-left: 10%;
margin-top: 0%;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
ul {
margin-right: 10%;
}
@media screen and (max-width: 750px) {
.header {height: 100vh;}
ul li {margin-top: 0%;}
h1{margin-top:30px;}
}
@media screen and (max-width: 500px) {
h1 {
font-size: 52px;
margin-top:30px;
}
ul li {margin-top: 0%;}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
@media screen and (max-width: 750px) {
.header {height: 300px;}
ul li {margin-top: 0%;}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 580px;
}
h1{
margin-top:30px;
}
}
@media screen and (max-width: 500px) {
h1 {
font-size: 52px;
margin-top:30px;
}
.links {display: none;}
ul li {margin-top: 0%;}
.mobilelinks {display: inline-block;}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 580px;
}
}
@media screen and (max-width: 400px) {
.header {height: 100vh;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
margin-top:30px;
}
h2 {
font-size: 22px;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 580px;
}
}
hr {
margin-left:120px;
margin-right:120px;
}
}
ul {
margin-right: 10%;
}
}
</style>
<title>About Me</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
<div class="header">
<h1>Who I Am</h1>
<ul class="links">
<li><a href="www.youtube.com"><strong>CONTACT</strong></a></li>
<li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
<li><a href="#middle"><strong>RESUME</strong></a></li>
<li><a href="index.html"><strong>HOME</strong></a></li>
</ul>
<ul class="mobilelinks">
<li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
<li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
<li><a href="#middle"><strong>RESUME</strong></a></li>
<li><a href="index.html"><strong>HOME</strong></a></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Hobbies</h2>
<h3>Movies</h3>
<p class="movies">
On the weekends my mother and I like to watch movies.<br>
We are really the only ones in the family who really enjoy the cinema culture.<br>
Although sometimes if it is a really popular movie we will all go like The Hunger Games.<br>
</p>
<h3>Programming</h3>
<p class="code">
I like to code websites like this.<br>
I find it relaxing and fun<br>
(unless there is an impossible bug)<br>
</p>
<h3>Bikeing</h3>
<p class="bike">
I like to bike with my dad when I’m stressed or we are both open.<br>
The bike I use now I got for Christmas and I love it. I find it a great escape.<br>
</p>
<h3>Reading</h3>
<p class="read">
I love to read.<br>
My dad got me into the classics like 1984 (creepy but cool)<br>
animal farm (still creepy but still cool)<br>
Ann Rand (thought provoking the future really is pretty scary)<br>
And fountain head (really long!).<br>
</p>
<h3>Video Games</h3>
<p class="games">
I like to play strategy games with my friends.<br>
Talking through skype and that is really fun because we can’t always see each other in person<br>
so video games are a way to see each other and hang out!<br>
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
<a href="#">Link</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms<span class="mobile-terms"> of Service</span></a>
</div>
</div>
答案 0 :(得分：3)
尝试添加
显示：块
到<a></a>锚。
.links li a {
display: block;
}