所以我正在为一个基于electron的客户端编写退出按钮,经过研究如何根据屏幕大小调整大小后,按钮旁边显示了一个白色空白。当我尝试将其移动到正确的位置时,它还在下面创建了一个巨大的白色框。有人知道为什么会发生这种情况并能帮我解决吗?
<body> <webview src="https://bapbap.gg"></webview> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black"> <style> body { display: flex; flex-direction: column; margin: 0; height: 100vh; position: relative; } webview { flex: 1; } .ExitButton { cursor: pointer; text-align: center; font-size: 10px; font-family: 'Archivo Black'; color: #6B7075; border-color: transparent; background-color: transparent; transition-duration: 0.5s; transform: translate(700px, 300px); } .ExitButton:hover { background-color: rgb(150, 5, 5); transition-duration: 0.5s; } .nav { display: flex; } </style> <div class="nav"> <button class="ExitButton" onclick="alert('Are you sure you want to exit BapClient?')">EXIT</button> </div> </button> </body>
在类
ExitButton
中,transform: translate(700px, 300px);
这一行负责将按钮从[0,0]移动到您提到的点:[700,300]。通过删除这行代码,您可以将按钮放置在页面的左上角。然后,您可以使用网格、布局等方法将其位置更改为任何您想要的位置。