调整单选按钮选项文本与按钮间距，实现10px统一边距

问题原因 #

你的代码里把label本身设置为固定宽高的圆形按钮，同时将文本span放在label内部，还给span设置了超大的margin-left:130px，再加上label的justify-content: center属性，导致文本位置被强行挤压，再加上三个选项文本长度不同，最终造成间距混乱。

修复方案 #

调整布局逻辑，让label作为容纳按钮和文本的容器，将圆形按钮的样式转移到伪元素上，直接给按钮和文本设置固定的10px间距：

修改后的CSS代码

div > label {
    margin-right: 80px !important;
    position: relative;
    display: flex;
    align-items: center; /* 垂直居中按钮与文本 */
    cursor: pointer;
    /* 移除固定宽度，让容器自适应内容 */
}

/* 用伪元素实现圆形按钮 */
div > label::before {
    content: "";
    box-shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    margin-right: 10px; /* 按钮与文本的固定间距 */
}

div > label::after {
    content: "";
    position: absolute;
    left: calc(0.7rem - 0.3rem); /* 让选中标记居中在圆形按钮内 */
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    background: #9baacf;
    border-radius: 50%;
    transition: 0.3s ease;
}

div > label:has(input:checked)::after{
  background: #6c7ae0;
}

div > label > input{
  display: none;
}

div > label:hover::after{
  background: #6c7ae0;
}

div > label > span {
    color: #9baacf;
    text-align: center;
    /* 移除原来的超大margin-left */
}

div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 82px;
    margin-right: 15px;
    margin-top: 25px;
    font-size: 12px;
    font-weight: 700;
}

保持原HTML结构不变

<div>
    <label>
        <input type="radio" value="all">
        <span>All</span>
    </label>
    <label>
        <input type="radio" value="upcoming">
        <span>Upcoming</span>
    </label>
    <label>
        <input type="radio" value="expired">
        <span>Expired</span>
    </label>
</div>

关键改动说明 #

1. 移除label的固定宽度和justify-content: center，让label作为flex容器自适应内容，仅保留垂直居中对齐
2. 将圆形按钮的阴影、宽高样式转移到::before伪元素上，并通过margin-right:10px设置与文本的固定间距
3. 调整::after伪元素的定位方式，确保选中标记始终居中在圆形按钮内
4. 删除span上的margin-left:130px，避免文本位置错乱

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