删除 HTML 按钮中的空白

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.所以我正在为我在 electron 中创建的客户端编写退出按钮，在弄清楚如何根据屏幕尺寸调整它的大小后，按钮旁边显示一个空白。 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>

Answer 1

in class ExitButton , the line transform: translate(700px, 300px);在 class ExitButton中，行transform: translate(700px, 300px); is responsible to move the button from [0,0] to the point that you mentioned: [700,300].负责将按钮从 [0,0] 移动到您提到的点：[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.然后你可以使用网格、布局等来改变位置到你想要的任何地方。

删除 HTML 按钮中的空白

问题描述

1 个解决方案

解决方案1
0 2022-10-08 06:56:16

删除 HTML 按钮中的空白

问题描述

1 个解决方案

解决方案1 0 2022-10-08 06:56:16

解决方案1
0 2022-10-08 06:56:16