Question

我正在尝试创建一个交互式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>

Answer 1

我建议仅制作按钮并使用JS将其链接到网站，此外，您还可以获取表单数据，以使用户不再单击或使用过哪个按钮，并拒绝它们再次单击。

链接无法在HTML页面的可点击框网格中工作

1 个答案: