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

input type="number" not aligned with input="checkbox" when in flexbox – Html

Currently, the input="number" is in the top right hand corner of the flexbox. When I change it from input="number" to input="checkbox" it becomes aligned. How do I make it so that when it is input="number" it aligns with the rest of the checkboxes?

body {
  background-color : #6d6875;
  font-family      : 'Open Sans', sans-serif;
  }
#options-div {
  background-color : #b5838d;
  margin           : 200px auto;
  padding          : 20px;
  width            : 350px;
  text-align       : center;
  border           : 2px solid white;
  }
#password-output {
  width  : 200px;
  }
#num-box {
  width  : 30px;
  height : 30px;
  }
.options {
  display         : flex;
  justify-content : space-between;
  border          : 2px solid black;
  }
<div id="options-div">
  <h1>Password generator</h1>
  <input id="password-output" type="number">
  <div class="options">
    <p>Password length</p>
    <input id="num-box" type="number">
  </div>
  <div class="options">
    <p>Include uppercase letters</p>
    <input type="checkbox">
  </div>
</div>
Tags:

3

Answers


  1. 0

    With this, the input box for each choice will be positioned to the right of the text. By changing the width of the elements or adding padding or margin, you can change the distance between the text and the input box.

    #options-div {
 display: flex;
 justify-content: space-between;
 align-items: center; /* This line is optional and can be used to 
 vertically center the items */
 border: 2px solid black;
}

    body {
  background-color : #6d6875;
  font-family      : 'Open Sans', sans-serif;
  }
#options-div {
  display: flex;
  justify-content: space-between;
  align-items: center; /* This line is optional and can be used to 
  vertically center the items */
  border: 2px solid black;
  }
#password-output {
  width  : 200px;
  }
#num-box {
  width  : 30px;
  height : 30px;
  }
.options {
  display         : flex;
  justify-content : space-between;
  border          : 2px solid black;
  }
    <div id="options-div">
  <h1>Password generator</h1>
  <input id="password-output" type="number">
  <div class="options">
    <p>Password length</p>
    <input id="num-box" type="number">
  </div>
  <div class="options">
    <p>Include uppercase letters</p>
    <input type="checkbox">
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    .options {
  display         : flex;
  justify-content : space-between;
  border          : 2px solid black;
  align-items     : center;
  }
    Login or Signup to reply.
  3. 0

    Try to do it:
    Change the <p> for <label> and add with your display: flex the justify-content: space-between and the align-items: center.

    In this case, the align-items will align the content in the center of your line.

    body {
  background-color : #6d6875;
  font-family      : 'Open Sans', sans-serif;
}
#options-div {
  background-color : #b5838d;
  margin           : 200px auto;
  padding          : 20px;
  width            : 350px;
  text-align       : center;
  border           : 2px solid white;
}
#password-output {
  width  : 200px;
}
#num-box {
  width  : 30px;
  height : 30px;
}
.options {
  width           : 100%;
  min-height      : 30px;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  border          : 2px solid black;
}
    <div id="options-div">
  <h1>Password generator</h1>
  <input id="password-output" type="number">
  <div class="options">
    <label>Password length</label>
    <input id="num-box" type="number">
  </div>
  <div class="options">
    <label>Include uppercase letters</label>
    <input type="checkbox">
  </div>
</div>

    I hope I’ve helped!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search