所以我正在为一个基于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> Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
在类
ExitButton中,transform: translate(700px, 300px);这一行负责将按钮从[0,0]移动到您提到的点:[700,300]。通过删除这行代码,您可以将按钮放置在页面的左上角。然后,您可以使用网格、布局等方法将其位置更改为任何您想要的位置。