我試圖將復選框和輸入字段整齊地排列在一列中，使數字居中對齊。這一切工作，直到我到了第10號，10和復選框有點偏右。

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>

Flexbox是一維的。您需要切換到grid或者指定元素寬度來對齊flex容器中的內容。另外，不要在布局中使用空白字符。使用彈性屬性、邊距等。

一個相當簡單的方法是在flex元素內調整跨度的大小并使其居中。您必須選擇一個與您期望的最大尺寸相當接近的尺寸，然后將其內容右對齊。我添加了包裝器，使列的寬度為50%。

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>

我的朋友，最好不要使用靜態的數字，相反你可以在CSS中使用counter-reset或者使用ol標簽來使數字動態化。

此外，通過使用ol標簽，您不需要考慮數字的樣式。

我在代碼中放了::marker來說明這一點，您甚至可以控制標記的樣式。

您可以將list-style-type更改為decimal，以刪除單個數字前的零。

: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>