Jadi saya sedang menulis butang keluar untuk pelanggan berasaskan elektron dan selepas meneliti cara mengubah saiznya mengikut saiz skrin, ruang putih muncul di sebelah butang. Ia juga mencipta kotak putih gergasi di bawah apabila saya cuba mengalihkannya ke kedudukan yang betul. Adakah sesiapa tahu mengapa ini berlaku dan boleh membantu saya membetulkannya?
<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> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam kelas
ExitButton中，transform: translate(700px, 300px);baris ini bertanggungjawab untuk mengalihkan butang dari [0,0] ke titik yang anda nyatakan: [700,300].Dengan mengalih keluar baris kod ini, anda boleh meletakkan butang di penjuru kiri sebelah atas halaman. Anda kemudian boleh menukar kedudukannya ke mana-mana yang anda mahu menggunakan grid, susun atur, dsb.