8

我正在尝试构建一个 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>

进一步的意见/说明：

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

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

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

4

2 回答 2

7

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>

于 2019-07-04T13:40:38.817 回答
-4 

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

</body>
</html>

于 2019-07-04T13:47:09.773 回答