CSS实现Fieldset内输入框旁分数框与选项内容对齐方案

推荐用Flexbox或者CSS Grid来实现，这俩是解决这类对齐问题的现代标准方案，完全替代手动margin的不靠谱做法，适配所有文本长度和屏幕尺寸。

方案一：Flexbox（最灵活通用） #

这种方案适合大多数场景，能快速实现弹性对齐：

HTML结构示例 #

<fieldset>
  <div class="option-item">
    <input type="radio" name="score-option" id="opt1">
    <label for="opt1">这是一段比较长的选项文本，用来测试不同长度下的对齐效果</label>
    <input type="number" class="score-input" placeholder="分数">
  </div>
  <div class="option-item">
    <input type="radio" name="score-option" id="opt2">
    <label for="opt2">短文本选项</label>
    <input type="number" class="score-input" placeholder="分数">
  </div>
</fieldset>

CSS代码 #

.option-item {
  display: flex;
  align-items: center; /* 垂直居中所有元素 */
  gap: 8px; /* 元素之间的间距，可根据需求调整 */
  margin: 8px 0; /* 选项之间的垂直间距 */
}

.option-item label {
  flex: 1; /* 让标签占据剩余所有空间，把分数框挤到最右侧 */
}

.score-input {
  width: 80px; /* 给分数框设置固定宽度，保证所有输入框对齐 */
}

/* 可选：给fieldset加基础样式，优化视觉 */
fieldset {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

方案二：CSS Grid（适合规整布局） #

如果需要更严格的列对齐（比如所有单选按钮、所有分数框都在同一垂直线上），Grid是更好的选择：

CSS代码（HTML结构和上面一致） #

.option-item {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 三列：单选按钮自适应宽度，文本列占满剩余，分数框自适应 */
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.score-input {
  width: 80px;
}

为什么之前的方法失效？ #

• 手动设置margin：完全依赖固定的文本长度，一旦文本变长/变短、屏幕缩放，就会错位。
• 用div加inline-block：元素的排列依赖内容流，没有弹性空间分配，无法保证分数框始终固定在右侧。

这两种方案都能自动适配文本长度和屏幕尺寸，不管选项文本多长、窗口怎么缩放，分数框都会和对应的单选、文本保持完美对齐。

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