如何用自定义CSS缩小Qualtrics移动端单选按钮间距

我之前帮好几个用户解决过这个Qualtrics移动端单选按钮间距的问题——默认的移动端样式确实会把横向转纵向的单选选项间距拉得特别开，用户得来回滚动才能看完所有选项，体验很差。其实用自定义CSS就能轻松搞定，下面是具体步骤和代码：

1. 找到Qualtrics的自定义CSS入口 #

登录你的Qualtrics账号，打开目标问卷的编辑器：

• 点击顶部导航栏的 Look & Feel
• 在弹出的设置窗口中切换到 Style 标签页
• 向下滚动到页面最底部，找到 Custom CSS 的输入框（这就是我们要添加自定义样式的地方）

2. 粘贴移动端专属的CSS代码 #

把下面的代码复制粘贴到Custom CSS框里，这段代码只会在屏幕宽度小于768px的设备（也就是大部分手机、平板）上生效，不会影响桌面端的原有布局：

/* 调整移动端单选选项的上下间距 */
@media only screen and (max-width: 768px) {
  /* 控制每个选项容器的上下外边距，数值可按需调整 */
  .Skin .MC .Choice {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  
  /* 可选：缩小单选按钮和选项文字之间的间距（如果觉得默认太宽） */
  .Skin .MC .RadioButton + label {
    padding-left: 7px !important;
  }
  
  /* 可选：调整整个问题区域的上下内边距，减少冗余空间 */
  .Skin .QuestionBody {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

3. 按需调整数值 #

• 你可以修改margin-top/margin-bottom的数值（比如改成5px或8px），直到你觉得间距舒适为止
• !important是必须的，用来强制覆盖Qualtrics的默认样式，确保你的自定义设置生效

4. 测试与微调 #

保存设置后，一定要用Qualtrics的移动端预览功能测试效果：

• 如果代码没生效，大概率是主题的类名略有不同（不同Qualtrics主题的元素类名可能有差异）
• 你可以用浏览器的开发者工具（比如Chrome按F12，切换到移动端视图），右键点击选项元素选择“检查”，找到对应的类名，替换CSS里的选择器（比如把.Skin .MC .Choice换成你查到的类名）

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