Titel umgeschrieben als: Leerzeichen in HTML-Schaltflächen entfernen
P粉787934476
P粉787934476 2023-09-15 13:01:31
0
1
645

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>
P粉787934476
P粉787934476

Antworte allen(1)
P粉550323338

在类ExitButton中,transform: translate(700px, 300px);这一行负责将按钮从[0,0]移动到您提到的点:[700,300]。

通过删除这行代码,您可以将按钮放置在页面的左上角。然后,您可以使用网格、布局等方法将其位置更改为任何您想要的位置。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!