我是真正的 HTML/CSS 新手，并且在响应式网站上工作。我确定此时我有一些不正确的技术，但到目前为止，从美学上讲，一切对我来说都还不错。当我的屏幕尺寸低于完整 View 时，我的问题就起作用了。大约 768 只有 1 个链接(联系链接)似乎有效，我不确定为什么。任何帮助将非常感激!谢谢!
HTML:
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>my<br/>name</h1>
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>Footer Text</p>
</div>
</div>
</body>
</html>
CSS:
body {
max-width: 90%;
margin: 0 auto;
font-size: 100%;
}
h1 {
font-family: 'bikoblack';
text-transform: uppercase;
font-size: 3em;
line-height: 85%;
color: #2d9471;
background-color: #1a5642;
float: left;
padding: 1em;
}
#header {
overflow: hidden;
z-index: "";
}
#nav {
position: relative;
top: 11em;
margin-bottom: 1 em;
}
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 4em;
}
#feature{
margin: 1%;
background-color: #1a5642;
padding: 5em;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
background-color: #1a5642;
}
.column3 {
margin-right: 0%;}
}
#feature, .article {
margin-bottom: 1em;
}
@media (max-width:480px){
#nav {
position: relative;
top:.05em;
width:200px;
}
}
@media (max-width:767px) and (min-width:481px){
#nav {
position: relative;
top: 5em;
}
}
最佳答案
导航中的列表项有较大的内边距，并且它们也是内嵌的。当它们在下一行中断时(因为没有足够的水平空间)它们重叠。列表中最后一个的填充延伸到上面的链接并覆盖它们。这就是您无法点击它们的原因。
试试这个作为快速修复:
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 0 4em; /* removed padding at the top and bottom */
}
关于html - 当屏幕尺寸缩小时，网站上的链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25254550/