求助！ 微信小程序单选框 radio 的圆圈和文字总是不在同一行怎么办

[odingo]

我正在开发一个自用的微信小程序，没什么编程经验。现在遇到一个问题，就是单选框的圆圈和文字总是不在同一行。

微信开发者工具里预览的时候，圆圈和文字是同一行。但是放到手机上，无论苹果还是安卓，文字总在圆圈下面，特别难看。

使用的就是 radio-group 和 radio 两个自带元素。

android 和 ios 下的小程序截图如下(不好意思图源不太稳定)：

https://ibb.co/Qvc0Kf7L

https://ibb.co/gLzCs3kK

微信开发工具预览窗口的截图如下(不好意思图源不太稳定)：

https://ibb.co/FkjxJdgF

[montaro2017]

代码呢

[odingo]

.wxml:

<radio-group bindchange="yingyang_cal_param3">
<radio value="0" checked="{{yingyang_params.checked}}">小于 70 岁</radio>
<radio value="1" checked="{{yingyang_params.checked}}">大于等于 70 岁</radio>
</radio-group>

.wxss:

radio {
flex: 1;
border: none;
border-radius: 4px;
border-left: 1px solid #4a7c59;
/* padding-left: 3px; */
margin-right: 3px;
margin-left: 20px;
margin-top: 2px;
margin-bottom: 2px;
padding: 2px 6px;
/* height: 22px; */
/* width: 100%; */
background-color: #f4f8f5;
color: #1f3b29;
/* font-size: 13px; */
display: flex !important;
align-items: center;
line-height: normal;
}

[odingo]

wxss 是根据 chatgpt 改的，不过和 css 无关，没有 radio 对应的 css 也是一样的情况

[canvascat]

官方文档的例子是这样写的，用 label 标签包裹
https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

<view class="weui-cell__hd">
<radio value="{{item.value}}" checked="true"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</radio-group>
</view>
</view>