Also schreibe ich eine Exit-Schaltfläche für einen elektronenbasierten Client und nachdem ich recherchiert habe, wie ich die Größe an die Bildschirmgröße anpassen kann, erscheint neben der Schaltfläche ein Leerzeichen. Außerdem entsteht darunter ein riesiges weißes Kästchen, wenn ich versuche, es in die richtige Position zu verschieben. Weiß jemand, warum das passiert und kann mir helfen, es zu beheben?
<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]。通过删除这行代码,您可以将按钮放置在页面的左上角。然后,您可以使用网格、布局等方法将其位置更改为任何您想要的位置。