I want to move the submit button below the email, what should i do. Thank you-CodePudding

html{
  box-sizing:border-box;
}
#header-img{
  height:40px;
  
}
#nav-bar{
  float:right;
  

}
.nav-link{
  text-decoration:none;
  color:black;
  margin:5px;
  
}
.nav-link:hover{
  background-color:#99c9ff;
  color:white;

}
h2{
  text-align:center;
}
#email{
  width: 50vw;
   margin-left : 25vw;
   
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Landing Page</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />   
    </head>
    <body>
      <main>
        <header id="header">
        <div >
          <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png " alt="logo"
        </div>
        <nav id="nav-bar">
          <a  href="#Features">Features</a>
          <a  href="#How it works">How it works</a>
          <a  href="#Pricing">Pricing</a>
        </nav>
        </header>
      </main>
    </body>
    <h2>Handcrafted, home-made masterpieces</h2>
    <form id="form">
      <input id="email" name="email" type="email" placeholder="Enter your email here" required>
      </input>
      <input id="submit" type="submit" value="Get Started"></input>
    </form>

CodePudding user response：

Use display block

html {
  box-sizing: border-box;
}

#header-img {
  height: 40px;
}

#nav-bar {
  float: right;
}

.nav-link {
  text-decoration: none;
  color: black;
  margin: 5px;
}

.nav-link:hover {
  background-color: #99c9ff;
  color: white;
}

h2 {
  text-align: center;
}

#email {
  width: 50vw;
  margin-left: 25vw;
  display: block;
}

#submit {
  margin-left: 25vw;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Landing Page</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <main>
    <header id="header">
      <div >
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png " alt="logo" </div>
        <nav id="nav-bar">
          <a  href="#Features">Features</a>
          <a  href="#How it works">How it works</a>
          <a  href="#Pricing">Pricing</a>
        </nav>
    </header>
  </main>
</body>
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form">
  <input id="email" name="email" type="email" placeholder="Enter your email here" required>
  </input>
  <input id="submit" type="submit" value="Get Started"></input>
</form>

CodePudding user response：

Using only HTML, you can wrap each of the <input> tags in a <div>

<form id="form">
  <div>
    <input id="email" name="email" type="email" placeholder="Enter your email here" required />
  </div>
  <div>
    <input id="submit" type="submit" value="Get Started" />
  </div>
</form>

Or with only CSS, you can make each of the inputs display: block;

input {
  display: block;
}

<form id="form">
  <input id="email" name="email" type="email" placeholder="Enter your email here" required />
  <input id="submit" type="submit" value="Get Started" />
</form>

CodePudding user response：

To move the button below input there are many ways. One of the simple way is to use flex properties.

#form {
 display: flex;
 flex-direction: column;
}