Html Question posted in
Some basic documentation can be found here.

Html – How can I move the button besides the email input?

I am having trouble moving the button next to the h3 and email input. I want them all in line horizontally. I have tried a lot of different things to make it work. At first I was unable to edit the style of the button literally at all. Somehow I figured out how to edit the style but now I can’t move it back to be next to the email input.

.container {
  display: inline-flex;
}

h3 {
  font-size: 2vw;
  margin: .5vw;
}

button {
  border-style: solid;
  border-color: #CCCCCC;
  border-radius: 20px;
  border-width: thin;
  font-size: 1.25vw;
  transition-duration: 0.4s;
  cursor: pointer;
  color: #CCCCCC;
  text-align: center;
}
<main>
  <h1>
    XXXXX
  </h1>
  <h2>
    coming soon
  </h2>

  <div class="container">
    <h3>sign up for more</h3>
    <form method="POST" netlify>
      <div class="email">
        <input type="email" name="email" id="email" placeholder="email" required>
      </div>
      <button type="submit" class="sign up">sign up</button>
    </form>
  </div>
</main>
Tags:

3

Answers


  1. 0

    Add this line of css

    .email{
        display: inline;
      }

    It can be solved in many ways. Also don’t give space between when you’re declaring a single class. use "signup"/"SignUp"/"signUp".

    <form method="POST" netlify>
            <div class="email">
                <input type="email" name="email" id="email" placeholder="email" required>
            </div>
            <button type="submit" class="signup">sign up</button>
        </form>
    Login or Signup to reply.
  2. 0

    Add display: flex to the form

    
form {
 display: flex;
 gap: 0.5rem;
}


    .container {
  display: inline-flex;
}

h3 {
  font-size: 2vw;
  margin: .5vw;
}

form {
  display: flex;
  gap: 0.5rem;
}


button {
  border-style: solid;
  border-color: #CCCCCC;
  border-radius: 20px;
  border-width: thin;
  font-size: 1.25vw;
  transition-duration: 0.4s;
  cursor: pointer;
  color: #CCCCCC;
  text-align: center;
}
    <main>
  <h1>
    XXXXX
  </h1>
  <h2>
    coming soon
  </h2>

  <div class="container">
    <h3>sign up for more</h3>
    <form method="POST" netlify>
      <div class="email">
        <input type="email" name="email" id="email" placeholder="email" required>
      </div>
      <button type="submit" class="sign up">sign up</button>
    </form>
  </div>
</main>
    Login or Signup to reply.
  3. 0

    There are many ways to align them horizontally. You can use the display: inline property or display: flex property as well.

    Using inline:

    .email{
  display: inline;
}

    Inline & Block elements.
    Div’s are "block" elements by default, so they accomodate all the space in the line. Hence the other element breaks to the second line. But by using this property, you turn it into an "inline" element so it only takes necessary space and allows the button element to be displayed next to it.

    Using Flexbox:

    form{
  display: flex;
  align-items: center;
  gap: .5em
}

    Flexbox can be used to align items enclosed within a container horizontally or vertically. Albeit, it could be complicated, but you could do much more with flexbox! But I assume you’d only need display: inline for now, to get your desired result.

    .container {
  display: inline-flex;
}

h3 {
  font-size: 2vw;
  margin: 0.5vw;
}

button {
  border-style: solid;
  border-color: #cccccc;
  border-radius: 20px;
  border-width: thin;
  font-size: 1.25vw;
  transition-duration: 0.4s;
  cursor: pointer;
  color: #cccccc;
  text-align: center;
}

.email {
  display: inline;
}
    <main>
  <h1>
    XXXXX
  </h1>
  <h2>
    coming soon
  </h2>

  <div class="container">
    <h3>sign up for more</h3>
    <form method="POST" netlify>
      <div class="email">
        <input type="email" name="email" id="email" placeholder="email" required>
      </div>
      <button type="submit" class="sign up">sign up</button>
    </form>
  </div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search