如何在居中堆叠布局中让一位数、两位数数字右对齐，保持组件整齐？

问题出在原布局中，数字和复选框共用一个居中对齐的容器，当数字从1位变为2位（如10）时，容器内内容宽度增加，直接挤压复选框位置，破坏了整体对齐。以下是两种修复方案：

方案一：Flex布局拆分元素位置 #

通过给数字设置固定宽度并右对齐，让复选框位置不受数字长度影响：

修改后的CSS #

/* 重置默认样式，消除浏览器差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

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

/* 左侧容器设置靠右对齐，控制复选框统一位置 */
.inputs span{
    display:flex;
    width:180px;
    align-items:center;
    justify-content: flex-end;
    gap: 8px; /* 替代 ，统一数字与复选框的间距 */
}

/* 数字固定宽度+右对齐，避免位数变化影响布局 */
.inputs .section-number {
    display: inline-block;
    width: 20px;
    text-align: right;
}

input[type=number]{
    width:30px;
}

修改后的HTML #

<div id="main">
  <span id="captions">
    <h2>Sections</h2><h2># of Questions</h2>
  </span>
  <p class="inputs">
    <span><span class="section-number">1</span><input type='checkbox'></span> <input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">2</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">3</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">4</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">5</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">6</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">7</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">8</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">9</span><input type='checkbox'></span><input type="number">
  </p>
  <p class="inputs">
    <span><span class="section-number">10</span><input type='checkbox'></span><input type="number">
  </p>
</div>

方案二：Grid布局（更简洁直观） #

用Grid明确划分每一列的宽度，从根源上保证元素对齐：

修改后的CSS #

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

#captions {
    display: grid;
    grid-template-columns: 180px 180px;
    width: 360px;
}

#captions h2{
    color:blue;
    border:solid 1px green;
    text-align:center;
}    

.inputs{
    display: grid;
    grid-template-columns: 20px auto 30px;
    width: 360px;
    margin-top:8px;
    margin-bottom:8px;
    align-items: center;
    justify-content: end;
    column-gap: 8px;
}

.section-number {
    text-align: right;
}

HTML结构与方案一一致，保留.section-number类即可。

内容的提问来源于stack exchange，提问作者DCR