使用CSS放置单选按钮标签

在使用CSS放置单选按钮标签时，可以使用以下方法：

使用CSS伪元素 ::before 或 ::after 为单选按钮添加自定义图标，并将单选按钮隐藏。
使用CSS的相对定位或绝对定位将单选按钮和标签对齐。
使用CSS的伪类 :checked 来改变选中状态下的样式。

以下是一个简单的示例代码：

 <input type="radio" name="radio-group" />
  <span class="radio-icon"></span>
  <span class="radio-label">选项1</span>
</label><label class="custom-radio">
 <input type="radio" name="radio-group" />
  <span class="radio-icon"></span>
  <span class="radio-label">选项2</span>
</label>

.custom-radio {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.radio-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
}

.radio-label {
  margin-left: 30px;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

input[type="radio"]:checked + .radio-icon {
  background-color: #ccc;
}

在这个示例中，我们使用了一个包含单选按钮和标签的 label 元素，并使用CSS将单选按钮隐藏，并使用伪元素 ::before 添加了一个自定义的圆形图标。当单选按钮被选中时，使用 :checked 伪类来改变图标的背景颜色。