所以我正在為一個基於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 ]。透過刪除這行程式碼,您可以將按鈕放置在頁面的左上角。然後,您可以使用網格、佈局等方法將其位置變更為任何您想要的位置。