奇怪的按钮无法点击

Question

我正在尝试构建网络应用程序，但遇到了问题。

该应用程序的大部分界面都由许多按钮组成，我遇到了一个奇怪的现象，即我无法点击某些按钮（没有点击动画，onclick() 也没有运行).

我注意到在有多个按钮堆叠在一起的地方，只有最后一行按钮是可点击的。

我创建了一个最小、完整且可验证的示例。

<html>
<body>
    <div style="padding-top: 20%;" id="div1">
        <button>
            Button 1
        </button><br />
        <button>
            Button 2
        </button>
    </div>
    <script>
        document.getElementById("div1").style.display = "initial";
    </script>
</body>
</html>

进一步observations/notes：

当您从开发者菜单转到 select 某个元素时，您无法 select 出现故障的按钮。

我正在使用 Firefox。我的应用程序在 Chrome 中遇到了类似的问题，但行为不当的按钮与在 Firefox 中损坏的按钮不同。

我试图通过分别设置 display: none; 和 display: initial; 隐藏和显示各种 <div> 元素（不同的屏幕）来创建单页网络应用程序。这就是 <script> 的原因。有更好的方法吗？

Answer 1

display: initial; 相当于 display: inline; 在你的情况下。

然后将 padding-top 应用于每一行内容，使第二行覆盖第一行。如果给包含的 div.

添加背景，会更容易看到

#div1 {
 padding-top: 15px;
 display: initial;
 background: #f00;
}

<div id="div1">
 <button>
  Button 1
 </button>
 <br>
 <button>
  Button 2
 </button>
</div>

Answer 2

<html>
<body>
    <div style="padding-top: 20%;">
        <button>
            Button 1
        </button><br />
        <button>
            Button 2
        </button>
    </div>

</body>
</html>

奇怪的按钮无法点击

Button weirdly not clickable

javascript

html

css

htmlbutton