Question3r Question3r -3 years ago 102
CSS Question

Create extra divs or handle single elements in CSS

this is a small login view. I got the default elements on this page and hold them in a parent container

#loginContainer
.



#loginContainer{
padding: 10px 5px 10px 5px;
color: #ffffff;
background-color: #262626;
}

.inputField{
cursor: text;
border: none;
border-radius: 2px;
padding: 7px 13px 7px 13px;
background-color: #151515;
color: #ffffff;
}

.btn{
cursor: pointer;
border:none;
font-weight: bold;
border-radius: 2px;
padding: 5px 10px 5px 10px;
margin: 0px 50px 0px 50px;
font-size: 16px;
color: #151515;
}

.link{
text-decoration: none;
cursor: pointer;
font-weight: bold;
}

#linkForgotPassword{
color: #5bb5cd;
transition: 0.5s;
}

#linkForgotPassword:hover{
color: #7dd7ef;
transition: 0.5s;
}

.loginBtn{
background-color: #5bb5cd;
transition: 0.5s;
}

.loginBtn:hover{
background-color: #7dd7ef;
transition: 0.5s;
}

<div id="loginContainer">
<input class="inputField" type="text" placeholder="Email">
<input class="inputField" type="text" placeholder="Password">
<input type="checkbox">Keep me signed in
<button class="btn loginBtn" onclick="">Sign in</button>
<a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a>
<button class="btn loginBtn" onclick="">Create an account</button>
</div>





As you can see, all the elements place themselves right next to each other. I want each element placing itself below the previous one.

So should I create a div for each element or is there a very simple way to archieve the behaviour?

Answer Source

As @MikeMcCaughan said, you can do this easily by using the display: block style. The example below applies block display to your inputField class, link class, and loginBtn class.

By using display: block, each element will fill that line, causing the next element to display on the next line. Once you've applied block display, you can customize the elements' positions with other styles (margin, padding, etc.).

#loginContainer {
  padding: 10px 5px 10px 5px;
  color: #ffffff;
  background-color: #262626;
}

.inputField {
  cursor: text;
  border: none;
  border-radius: 2px;
  padding: 7px 13px 7px 13px;
  background-color: #151515;
  color: #ffffff;
  display: block;
}

.btn {
  cursor: pointer;
  border: none;
  font-weight: bold;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  margin: 0px 50px 0px 50px;
  font-size: 16px;
  color: #151515;
}

.link {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  display: block;
}

#linkForgotPassword {
  color: #5bb5cd;
  transition: 0.5s;
}

#linkForgotPassword:hover {
  color: #7dd7ef;
  transition: 0.5s;
}

.loginBtn {
  background-color: #5bb5cd;
  transition: 0.5s;
  display: block;
}

.loginBtn:hover {
  background-color: #7dd7ef;
  transition: 0.5s;
}
<div id="loginContainer">
  <input class="inputField" type="text" placeholder="Email">
  <input class="inputField" type="text" placeholder="Password">
  <input type="checkbox">Keep me signed in
  <button class="btn loginBtn" onclick="">Sign in</button>
  <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a>
  <button class="btn loginBtn" onclick="">Create an account</button>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download