Removing white space in HTML button
Question
So I'm coding an exit button for a client I'm making based in electron, and after figuring out how to re-size it according to screen size, the button shows a white space beside it. When I try and move it to the correct location it creates a huge white box under it too. Does anyone know why this is happening and could help me fix it?
<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>
1 answers
solution1
0 2022-10-08 06:56:16
in class ExitButton , the line transform: translate(700px, 300px); is responsible to move the button from [0,0] to the point that you mentioned: [700,300].
By removing that line, you can get your button just on left&top of the page. Then you can use grids, layouts, etc. to change the location to wherever you want.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.