Angular+SCSS实现单选按钮同行、标签居下布局求助

直接上可行的实现方案，分两种常用布局方式：

方案一：Flex布局（推荐，更简洁） #

Angular模板代码 #

<!-- 假设你有一个选项数组options，结构示例：[{value: '1', label: '1'}, {value: '2', label: '2'}...] -->
<div class="radio-container">
  <label class="radio-option" *ngFor="let opt of options">
    <input type="radio" name="single-group" [value]="opt.value">
    <span>{{opt.label}}</span>
  </label>
</div>

SCSS样式代码 #

.radio-container {
  display: flex;
  gap: 20px; /* 控制每个单选选项之间的横向间距 */
}

.radio-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer; /* 点击标签也能选中单选按钮 */

  input[type="radio"] {
    margin: 0 0 8px 0; /* 调整单选按钮和下方标签的间距 */
  }

  span {
    font-size: 14px;
  }
}

方案二：Inline-block布局（兼容旧环境） #

如果项目需要兼容不支持flex的旧浏览器，可以用这个方案：

Angular模板代码 #

和方案一的模板一致，无需修改

SCSS样式代码 #

.radio-container {
  font-size: 0; /* 消除inline-block元素之间的默认空白间距 */
}

.radio-option {
  display: inline-block;
  font-size: 14px; /* 恢复正常字体大小 */
  text-align: center;
  margin-right: 20px; /* 控制选项间距 */
  cursor: pointer;

  input[type="radio"] {
    display: block;
    margin: 0 auto 8px; /* 让单选按钮居中，同时和标签拉开间距 */
  }
}

问题根源说明 #

你之前的问题大概率是没把单个单选按钮+对应标签作为一个独立的布局单元，导致单选和标签都以inline/inline-block形式在同一行排列。现在通过把每个选项包裹在<label>里，让这个容器成为横向排列的基本单元，内部再垂直排列按钮和标签，就能实现你要的效果。

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