我正在做一个小项目，遇到了一个有趣的问题(下面的代码被简化了，但行为是一样的)。由于某种原因，只有 Column4 的 URL 是可点击的，而其余的则不是。你知道问题的原因是什么吗？我花了很多时间调查这个问题，似乎输入字段可能有问题，但我不明白为什么。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body class="container">
<div class="navbar-fixed">
<nav>
<ul id="nav-mobile" class="left">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li>
<div class="row" id="topbarsearch">
<form name="myform" method="post">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input type="text" id="autocomplete-input" name="autocomplete-input">
<input type="submit" style="visibility: hidden;">
<ul class="autocomplete-content dropdown-content"></ul>
</div>
</form>
</div>
</li>
</ul>
</nav>
</div>
<main>
<table class="centered">
<tr>
<th><a href="#">Column1</a></th>
<th><a href="#">Column2</a></th>
<th><a href="#">Column3</a></th>
<th><a href="#">Column4</a></th>
</tr>
</table>
</main>
</body>
</html>最佳答案
用于搜索的表单中的提交按钮导致表单以及整个菜单栏变高。菜单栏位于页面其余部分的“前面”，因此它会挡住前三列，即使没有任何可见的东西会导致这种情况。
要解决此问题，请添加 style="max-height: 64px;"到 <ul id="nav-mobile" class="left">元素，使其变为 <ul id="nav-mobile" class="left" style="max-height: 64px;"> .这允许单击其他三列。 (在 Chrome 77 中测试)
更新:另外，添加 style="max-height: 64px; overflow: hidden"至 <div class="input-field"> .
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body class="container">
<div class="navbar-fixed">
<nav>
<ul id="nav-mobile" class="left" style="max-height: 64px;">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li>
<div class="row" id="topbarsearch">
<form name="myform" method="post">
<div class="input-field" style="max-height: 64px; overflow: hidden">
<i class="material-icons prefix">search</i>
<input type="text" id="autocomplete-input" name="autocomplete-input">
<input type="submit" style="visibility: hidden;">
<ul class="autocomplete-content dropdown-content"></ul>
</div>
</form>
</div>
</li>
</ul>
</nav>
</div>
<main>
<table class="centered">
<tr>
<th><a href="#">Column1</a></th>
<th><a href="#">Column2</a></th>
<th><a href="#">Column3</a></th>
<th><a href="#">Column4</a></th>
</tr>
</table>
</main>
</body>
</html>关于html - 一些 href 链接不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57998750/