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

用于搜索的表单中的“提交”按钮导致该表单以及整个菜单栏变高。菜单栏位于页面其余部分的“前面”，因此即使没有可见的菜单栏也阻止了前三列。

要解决此问题，请将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链接不可点击

1 个答案: