HTML链接是不可点击的怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (344)

我有一个很简单的网站。它通过php扫描图片,然后一次显示一个图片,顶部有两个按钮。Botton是用来在它们之间来回切换的。在页面的最上面有几个链接,但是我不能点击它们。当我双击它们时,图片会被高亮显示,而不是我的光标在上面的文本。我在没有js和php的情况下尝试过,问题仍然存在。

我对HTML不是很有经验。我想这可能是关于z指数的问题,但我无法修正它。

body {
  background-color: #FFFFFFf
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Vorspeise</a></div>
<div class="menup1"><a href="../../../Suppen">Suppen</a></div>
<div class="menup1"><a href="../../../Dessert">Dessert</a></div>
<div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
<div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
<div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
<div class="container">
  <img id="rezept" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

我希望你能在这里帮我。我可以设法找出所有涉及js和php的东西,但是语言不遵循编程规则.不是我最好的部分。

提问于
用户回答回答于

你之所以在链接上有框,是因为浮标没有被清除。这意味着包含链接的框会折叠,这可能就是你需要添加这么多填充的原因。如果你加上clear: both到容器,你将能够单击链接。

position: relative这就是它在菜单上堆叠的原因。因此,或者你可以添加z-index: -1;而是放在容器上。这取决于你希望它如何工作。

body {
  background-color: #FFFFFFf
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;     
  width: 100%;
  padding-top: 200px;
  /* clear: both; */
  z-index: -1;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Vorspeise</a></div>
<div class="menup1"><a href="../../../Suppen">Suppen</a></div>
<div class="menup1"><a href="../../../Dessert">Dessert</a></div>
<div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
<div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
<div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
<div class="container">
  <img id="rezept" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

用户回答回答于

问题不在于z-index,而是你的容器正在重叠你的菜单项。若要更正此问题,请替换padding-top: 200px带着margin-top: 200px,然后把容器float: left。或者,如果不希望在容器中添加任何“偏移”,则可以在使用clear: left

还请注意,你的body.menup1有无效的背景颜色;当指定十六进制代码时,指定三个、四个或六个字母/数字。五是无效的。

这两种情况都已在以下几个方面得到了解决:

body {
  background-color: #ffffff;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #ffffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  float: left;
  width: 100%;
  margin-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Vorspeise</a></div>
<div class="menup1"><a href="../../../Suppen">Suppen</a></div>
<div class="menup1"><a href="../../../Dessert">Dessert</a></div>
<div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
<div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
<div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
<div class="container">
  <img id="rezept" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

扫码关注云+社区

领取腾讯云代金券