简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Title rewritten as: Eliminate spaces in HTML buttons
P粉787934476
P粉787934476 2023-09-15 13:01:31
0
1
646

So I'm writing an exit button for an electron-based client, and after researching how to resize it based on the screen size, a white space appears next to the button. It also creates a giant white box underneath when I try to move it to the correct position. Does anyone know why this is happening and can 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>
P粉787934476
P粉787934476

reply all(1)
P粉550323338
P粉5503233382023-09-16 12:01:17 1 floor

In class ExitButton, transform: translate(700px, 300px);This line is responsible for moving the button from [0,0] to the point you mentioned: [700,300 ].

By removing this line of code, you can place the button in the upper left corner of the page. You can then change its position to anywhere you want using grid, layout, etc.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！