Question

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

该应用程序的大多数界面都由许多按钮组成，并且我遇到了一个奇怪现象，即无法单击某些按钮（没有单击动画，并且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>

更多观察结果/注释：

当您从开发人员菜单中选择一个元素时，您将无法选择发生故障的按钮。

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

我试图通过分别设置<div>和display: none;来隐藏和显示各种display: initial;元素（不同的屏幕）来创建单页Web应用程序。这就是<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>

按钮异常不可点击

2 个答案: