我正在尝试创建一个交互式 Jeopardy 板，用户可以在其中单击任何数字值并转到相关问题页面(稍后将完成后端)。
问题是前两列无法点击(链接无效)以及第三列的一半，如下图所示:
灰色圆圈表示不能点击的部分。红色框是我希望可点击的框的边界。
我意识到这与我的 CSS 样式页面中的 width: 17%; 属性有关，但是将其设置得更高会使我无法将点击框放置在我想放置的位置他们。我也尝试了多种其他方法，但均无济于事。
如果有更有效的方法来做到这一点，我会洗耳恭听。
* {
box-sizing: border-box;
}
.board{
margin-left: auto;
margin-right: auto;
width: 1250px;
height: 680px;
background-image: url("../rsc/board.png");
background-repeat: no-repeat;
}
.column{
float: left;
width: 17%;
padding: 10px;
}
.board::after {
content: "";
display: table;
clear: both;
}
body {
background-color: #F5F5F5;
background-image: url("../rsc/background.png");
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a {
display:inline-block;
width:100px;
height:50px;
border:1px solid #ff0000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jeopardy!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
//Get POST data
$username = $_POST['username'];
?>
<h1 style="color: white;">Welcome, <?php echo $username ?>! This is Jeopardy!</h1>
<div class="board">
<div class="column">
<a href="questions.html" style="margin-left: 270px; margin-top: 160px;"></a>
<a href="questions.html" style="margin-left: 270px; margin-top: 25px;"></a>
<a href="questions.html" style="margin-left: 270px; margin-top: 23px;"></a>
<a href="questions.html" style="margin-left: 270px; margin-top: 22px;"></a>
<a href="questions.html" style="margin-left: 270px; margin-top: 23px;"></a>
</div>
<div class="column">
<a href="questions.html" style="margin-left: 220px; margin-top: 160px;"></a>
<a href="questions.html" style="margin-left: 220px; margin-top: 25px;"></a>
<a href="questions.html" style="margin-left: 220px; margin-top: 23px;"></a>
<a href="questions.html" style="margin-left: 220px; margin-top: 22px;"></a>
<a href="questions.html" style="margin-left: 220px; margin-top: 23px;"></a>
</div>
<div class="column">
<a href="questions.html" style="margin-left: 160px; margin-top: 160px;"></a>
<a href="questions.html" style="margin-left: 160px; margin-top: 25px;"></a>
<a href="questions.html" style="margin-left: 160px; margin-top: 23px;"></a>
<a href="questions.html" style="margin-left: 160px; margin-top: 22px;"></a>
<a href="questions.html" style="margin-left: 160px; margin-top: 23px;"></a>
</div>
<div class="column">
<a href="questions.html" style="margin-left: 95px; margin-top: 160px;"></a>
<a href="questions.html" style="margin-left: 95px; margin-top: 25px;"></a>
<a href="questions.html" style="margin-left: 95px; margin-top: 23px;"></a>
<a href="questions.html" style="margin-left: 95px; margin-top: 22px;"></a>
<a href="questions.html" style="margin-left: 95px; margin-top: 23px;"></a>
</div>
<div class="column">
<a href="questions.html" style="margin-top: 160px;"></a>
<a href="questions.html" style="margin-top: 25px;"></a>
<a href="questions.html" style="margin-top: 23px;"></a>
<a href="questions.html" style="margin-top: 22px;"></a>
<a href="questions.html" style="margin-top: 23px;"></a>
</div>
</div>
</body>
</html>最佳答案
我建议只制作按钮并使用 JS 将它们链接到站点，此外，您还可以获取表单数据，让用户知道已经单击/使用了哪个按钮，并拒绝他们再次单击它。
关于html - 链接在 HTML 页面中的可点击框网格内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52358762/