一些 href 链接不可点击

Question

我正在做一个小项目，遇到了一个有趣的问题（下面的代码被简化了，但行为是一样的）。由于某种原因，只有 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>

Answer 1

用于搜索的表单中的提交按钮导致表单以及整个菜单栏变高。菜单栏占页面其余部分的 "in front"，因此它会挡住前三列，即使没有任何可见的东西会导致这种情况。

要解决此问题，请将 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>

一些 href 链接不可点击

Some href links not clickable

html

materialize