Question

＆＃34;导航栏上的链接＆＃34;在我的网站上由于某种原因无法点击，我似乎无法找到原因。它位于视口中（以下是网站的链接：https://codetheworld.000webhostapp.com/。网站上的链接应该是＆＃34;学习代码＆＃34;按钮）。一个有趣的事情是，一旦我打开一个检查元素窗口，它就可以工作了。以下是导航栏的代码段：

＆＃13;

#first {
  margin-top: 500px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: -1150px;
  left: 100px;
  z-index: 4;
}

li a {
  width: 200px;
  height: 50px;
  font-size: 2em;
  text-decoration: none;
  color: white;
  font-family: Georgia, serif;
  padding: 10px;
  border: 2px solid white;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
}

li a:hover {
  background-color: grey;
  color: white;
  text-decoration: none;
}

＆＃13;

<ul id="first">
  <li><a href="tutorial.html">Learn to code</a></li>
</ul>

＆＃13;

Answer 1

您将元素放置在视口之外，因此无法单击它。删除margin-top＆amp;顶级定位，一切都会奏效：

#first {
    background: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 100px;
  z-index: 4;
}

li a {
  width: 200px;
  height: 50px;
  font-size: 2em;
  text-decoration: none;
  color: white;
  font-family: Georgia, serif;
  padding: 10px;
  border: 2px solid white;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
}

li a:hover {
  background-color: grey;
  color: white;
  text-decoration: none;
}

<ul id="first">
  <li><a href="tutorial.html">Learn to code</a></li>
</ul>

Answer 2

嗯，你有一个<div id="up2">，它就在你的按钮上方。这就是您无法点击该按钮的原因。

您可以增加div＃up2的最高值，并编辑/减少div＃up2中元素的最高值。

Answer 3

@Alessi 42评论了正确的解决方案，但Dekel是发布它的人。

我做了一个小提琴并验证了确定性：https：// jsfiddle.net / drpeck / tgeyfpd8 /

所以我要从经验中学习：

使用和不使用CSS进行首次测试，一旦确定没有CSS，就会出现元素。
开始介绍CSS选择器并添加/删除不同的属性
找到受影响的属性后，继续使用值。

为了我自己，虽然不是必需的，但是拥有绝对路径总能帮助我个人避免任何意外的误解（换句话说是清晰），即使文件位于根目录下。即：

内容如下： href =＆＃34; tutorial.html＆＃34; 我会做href =＆＃34; ./ tutorial.html＆＃34;

无法点击HTML链接

3 个答案: