'is there any way to make an html button connected to the top

I've been trying to make the CSS buttons connected to the top but I cant figure anything out i made the code in w3 schools right here

the required result: image and thats what im trying to do

htmlcss


Solution 1:[1]

The problem isn't your code. The problem is that the example has the same issue that you are experiencing. If you open your code in full page view, you'll see that the notbutton element will move up to the top line. If you shrink your browser window, at some point the notbutton element jumps down to the next line.

Here's a solution that uses a wrapper <nav> element and flexbox for the .btn-group elements.

<!DOCTYPE html>
<html>

<head>
  <style>
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #ffffff;
    }
    
    .btn-group .button {
      background-color: #282a35;
      /* Dark */
      color: #ffffff;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-bottom: 4px solid #303740;
    }
    
    .btn-group .button:hover {
      background-color: #000000;
    }
    
    .btn-group .notbutton {
      background-color: #282a35;
      /* Dark */
      color: #282a35;
      padding: 0;             /* Remove padding from .notbutton */
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: cursor;
      border: none;
      border-bottom: 4px solid #303740;
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
      -ms-user-select: none;
      user-select: none;
    }
    
    nav,
    .btn-group {              /* make the nav and .btn-group flexbox */
      display: flex;
      flex-flow: row nowrap;
    }
  </style>
</head>

<body style="background-color:#1a1a1b;">

  <!-- Wrap your form and btn-group in another element such as <nav> -->
  <nav>
    <form action="https://www.google.com">
      <div class="btn-group">
        <button class="button">Area</button>
        <button class="button">Area1</button>
        <button class="button">Area2</button>
      </div>
    </form>
    <div class="btn-group">
      <button class="notbutton">no text here ToTaLy No TeXt YAYAYAYAYAYAYAYA</button>
    </div>
  </nav>

  <p style="clear:both"><br>the website</p>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dan Mullin

Related Questions