How do I align my buttons horizontally for my website?-CodePudding

I' m trying to align my buttons horizontally for my personal website. Any solutions of how I can do so? I'm a beginner but I can mostly understand HTML and CSS. Any help is appreciated.‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

  <body>

    <section >
  <div >
  </div>
</section>

<style>
         body, html{
          margin: 0;
          padding: 0;
          width: 100vw;
          height: 100vh;
          background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
          background-size: 1800% 1800%;
          font-family: Arial, Helvetica, sans-serif;
          color: black;
          image-rendering: pixelated;
          scrollbar-width: none;
          overflow: none;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          -webkit-animation: rainbow 18s ease infinite;
          -z-animation: rainbow 18s ease infinite;
          -o-animation: rainbow 18s ease infinite;
            animation: rainbow 18s ease infinite;
        }
        ::-webkit-scrollbar {
        display: none;
        }
        iframe {
            width: 100vw;
            height: 100vh;
            border: none;
            margin: 0;
            padding: 0;
            display: block;
        }
        @-webkit-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-moz-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-o-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @keyframes rainbow { 
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        h2 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
        h5 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
    </style>

    
       <h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
    
      <h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
      <br>
        <button onclick="location.href = 'info.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Want to learn more?</button>
           <br>
           <button onclick="location.href = 'corrosion.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Use Corrosion</button>
           <br>
           <button onclick="location.href = 'mobydick.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Read Moby Dick</button>
           <br>
           <button onclick="location.href = 'hmrkey.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >HammerHead Key</button>
    </body>

CodePudding user response：

You can wrap your button tags around a div and then add a display: flex for the div tag

<body>

    <section >
  <div >
  </div>
</section>

<style>
         body, html{
          margin: 0;
          padding: 0;
          width: 100vw;
          height: 100vh;
          background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
          background-size: 1800% 1800%;
          font-family: Arial, Helvetica, sans-serif;
          color: black;
          image-rendering: pixelated;
          scrollbar-width: none;
          overflow: none;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          -webkit-animation: rainbow 18s ease infinite;
          -z-animation: rainbow 18s ease infinite;
          -o-animation: rainbow 18s ease infinite;
            animation: rainbow 18s ease infinite;
        }
        ::-webkit-scrollbar {
        display: none;
        }
        iframe {
            width: 100vw;
            height: 100vh;
            border: none;
            margin: 0;
            padding: 0;
            display: block;
        }
        @-webkit-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-moz-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-o-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @keyframes rainbow { 
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        h2 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
        h5 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
        div {
          display: flex;
        }
    </style>

    
       <h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
    
      <h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
      <br>
      <div>
        <button onclick="location.href = 'info.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Want to learn more?</button>
           <br>
           <button onclick="location.href = 'corrosion.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Use Corrosion</button>
           <br>
           <button onclick="location.href = 'mobydick.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Read Moby Dick</button>
           <br>
           <button onclick="location.href = 'hmrkey.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >HammerHead Key</button>
      </div>
    </body>

You can also add margin for your button tags, so the buttons don't stay too close to each other.

CodePudding user response：

  <body>

    <section >
  <div >
  </div>
</section>

<style>
         body, html{
          margin: 0;
          padding: 0;
          width: 100vw;
          height: 100vh;
          background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
          background-size: 1800% 1800%;
          font-family: Arial, Helvetica, sans-serif;
          color: black;
          image-rendering: pixelated;
          scrollbar-width: none;
          overflow: none;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          -webkit-animation: rainbow 18s ease infinite;
          -z-animation: rainbow 18s ease infinite;
          -o-animation: rainbow 18s ease infinite;
            animation: rainbow 18s ease infinite;
        }
        ::-webkit-scrollbar {
        display: none;
        }
        iframe {
            width: 100vw;
            height: 100vh;
            border: none;
            margin: 0;
            padding: 0;
            display: block;
        }
        @-webkit-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-moz-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-o-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @keyframes rainbow { 
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        h2 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
        h5 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
        
        .button-wrap {
          width: 100%;
          display: flex;
          justify-content: space-around;
        }
    </style>

    
       <h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
    
      <h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
      <br>
      <div >
        <button onclick="location.href = 'info.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Want to learn more?</button>
           <br>
           <button onclick="location.href = 'corrosion.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Use Corrosion</button>
           <br>
           <button onclick="location.href = 'mobydick.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >Read Moby Dick</button>
           <br>
           <button onclick="location.href = 'hmrkey.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" >HammerHead Key</button>
           </div>
    </body>

CodePudding user response：

Place all the buttons inside a div tag and use wrapper class for that div. add display:flex; attribute to the wrapper class, and use margin attribute to the button elements to provide space between the buttons.

.wrapper{
display:flex;
}

<body>

    <section >
  <div >
  </div>
</section>

<style>
         body, html{
          margin: 0;
          padding: 0;
          width: 100vw;
          height: 100vh;
          background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
          background-size: 1800% 1800%;
          font-family: Arial, Helvetica, sans-serif;
          color: black;
          image-rendering: pixelated;
          scrollbar-width: none;
          overflow: none;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          -webkit-animation: rainbow 18s ease infinite;
          -z-animation: rainbow 18s ease infinite;
          -o-animation: rainbow 18s ease infinite;
            animation: rainbow 18s ease infinite;
        }
        ::-webkit-scrollbar {
        display: none;
        }
        iframe {
            width: 100vw;
            height: 100vh;
            border: none;
            margin: 0;
            padding: 0;
            display: block;
        }
        @-webkit-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-moz-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @-o-keyframes rainbow {
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        @keyframes rainbow { 
            0%{background-position:0% 82%}
            50%{background-position:100% 19%}
            100%{background-position:0% 82%}
        }
        h2 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
        h5 {
          padding: 1em 2em;
          margin: 0.25em 0.25em;
        }
    </style>

    
       <h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
    
      <h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
      <br>
      <div >
        <button onclick="location.href = 'info.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black;margin:0 8px;" >Want to learn more?</button>
           <br>
           <button onclick="location.href = 'corrosion.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; margin:0 8px; color:black" >Use Corrosion</button>
           <br>
           <button onclick="location.href = 'mobydick.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal;  text-align:center; margin:0 8px; color:black" >Read Moby Dick</button>
           <br>
           <button onclick="location.href = 'hmrkey.html'"
           style="font-family:monospace; font-weight: 500; font-style: normal;  text-align:center; margin:0 8px; color:black" >HammerHead Key</button>
           </div>
    </body>