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

Html – right justify numbers when dealing with 1-9 and 10

I’m trying to right justify the numbers centered under section with the check boxes and input fields neatly lined up in a column. This all works until I get to number 10 where 10 and the check box are a little off to the right.

input[type=number], p{
    width:30px;
    margin-left:75px;
    margin-right:75px;
}

#captions h2{
    color:blue;
    display:inline-block;
    width:180px;
    border:solid 1px green;
    text-align:center;
}    

#main{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:solid 1px black;
}

.inputs{
    display:flex;
    align-items:center;
    width:360px;
    margin-top:8px;
    margin-bottom:8px;
}

.inputs span{
    display:flex;
    width:180px;
    justify-content:center;
   
}
<div id="main">
  <span id="captions">
    <h2>Sections</h2><h2># of Questions</h2>
</span>
  <p class="inputs">
    <span>1 &nbsp; <input type='checkbox'></span> <input type="number">
  </p>
  <p class="inputs">
    <span>2 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>3 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>4 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>5 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>6 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>7 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>8 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>9 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span>10 &nbsp;<input type='checkbox'></span><input type="number">
  </p>
</div>
Tags:

2

Answers


  1. 0

    Flexbox is one-dimensional. You’ll need to either switch to grid or specify element width to align content across flex containers. Also, don’t use whitespace characters for layout. Use flex properties, margin, etc.

    One fairly simple approach is to size and center the spans inside the flex elements. You’ll have to pick a size which gets you fairly close to whatever maximum size you expect to need, then right-align its content. I’ve added wrappers to get the columns to be 50% width.

    input[type=number],
p {
  width: 30px;
  margin-left: 75px;
  margin-right: 75px;
}

#captions h2 {
  color: blue;
  display: inline-block;
  width: 180px;
  border: solid 1px green;
  text-align: center;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
}

.inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.inputs span {
  display: flex;
  justify-content: center;
  width: 50%;
}

.inputs span span {
  display: inline-block;
  width: 50px;
  text-align: right;
}
    <div id="main">
  <span id="captions">
    <h2>Sections</h2><h2># of Questions</h2>
  </span>

  <p class="inputs">
    <span><span>1 <input type='checkbox'></span></span>
    <span><input type="number"></span>
  </p>

  <p class="inputs">
    <span><span>10 <input type='checkbox'></span></span>
    <span><input type="number"></span>
  </p>

  <p class="inputs">
    <span><span>100 <input type='checkbox'></span></span>
    <span><input type="number"></span>
  </p>
</div>
    Login or Signup to reply.
  2. 0

    My friend, it is better to not use static numbers, instead you can use counter-reset in CSS or use the ol tag to make the numbers dynamic.

    Also, by using ol tag, you don’t need to take care of the style with the numbers.

    I put ::marker in the code to show you that, you can even control the style of the markers.

    You can change the list-style-type to decimal to remove the zero before the single numbers.

    :root {
  --primary-color: blue;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 1px black;
}

#captions {
  display: flex;
  justify-content: center;
}

#captions p {
  flex: 1 0 auto;
  width: 100%;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--primary-color);
  text-align: center;
  border: solid 1px green;
}

.inputs {
  list-style-type: decimal-leading-zero;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  gap: 15px 0;
}

.inputs li div {
  display: flex;
  width: 180px;
  justify-content: space-between;
  align-items: center;
}

.inputs li::marker {
  color: var(--primary-color);
}

.inputs input[type=number] {
  width: 30px;
}
    <main id="main">
  <header id="captions">
    <p>Sections</p>
    <p># of Questions</p>
  </header>
  <ol class="inputs">
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
  </ol>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search