Gravity Forms：为单选按钮添加支持HTML的独立描述

这个移动端单选按钮和描述分家的问题我之前也碰到过，确实挺闹心的——尤其是用户缩放屏幕的时候，描述飘到别的选项下面，体验直接拉胯。给你分享个我常用的解决方案，既能支持HTML富文本描述，又能确保移动端适配时两者牢牢绑定在一起：

核心思路 #

把每个单选按钮和对应的HTML描述包裹在同一个语义化容器里，通过CSS让它们成为一个不可分割的整体，这样无论屏幕怎么缩放，描述都会紧跟在单选按钮旁边/下方，不会出现分离错位的情况。

具体实现代码 #

HTML结构 #

我推荐用<label>来包裹每个选项，因为它本身就和单选按钮关联，点击描述也能选中对应选项，用户体验更好，同时天然把按钮和描述绑定成一个单元：

<div class="radio-group">
  <label class="radio-option">
    <input type="radio" name="preference" value="basic">
    <div class="radio-desc">
      基础版：<strong>适合个人用户</strong>，包含核心功能，支持<i>单设备登录</i>
    </div>
  </label>

  <label class="radio-option">
    <input type="radio" name="preference" value="pro">
    <div class="radio-desc">
      专业版：<span style="color:#2563eb;">适合小型团队</span>，支持多设备协作，还有专属技术支持
    </div>
  </label>

  <label class="radio-option">
    <input type="radio" name="preference" value="enterprise">
    <div class="radio-desc">
      企业版：定制化服务，可对接内部系统，<a href="#contact">点击咨询详情</a>
    </div>
  </label>
</div>

CSS样式 #

用Flex布局来控制容器内的元素排列，确保移动端适配时的稳定性：

/* 整个单选组的容器 */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* 选项之间的间距，可根据需求调整 */
  padding: 1rem;
}

/* 单个选项的容器，把按钮和描述绑定 */
.radio-option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 按钮和描述之间的间距 */
  cursor: pointer;
}

/* 移动端适配：小屏幕下确保元素左对齐，不会错位 */
@media (max-width: 768px) {
  .radio-option {
    align-items: flex-start;
  }
}

为什么这个方案靠谱？ #

1. 语义化+交互友好：<label>的使用不仅从结构上绑定了按钮和描述，还实现了“点击描述选中选项”的便捷交互
2. 布局稳定：Flex布局确保每个选项都是独立的块级单元，屏幕缩放时不会出现元素乱跑的情况
3. 完全支持HTML：描述区域是独立的<div>，可以自由添加任何HTML标签、样式甚至链接，满足你的富文本需求

额外优化小技巧 #

• 如果想把描述放在单选按钮右侧，只需把.radio-option的flex-direction改成row，再调整对齐方式即可
• 可以给选中的选项添加反馈样式，增强用户感知：

.radio-option input[type="radio"]:checked + .radio-desc {
  color: #16a34a;
  font-weight: 500;
}

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