如何消除jQuery Mobile中垂直排列单选按钮的间距？

你之前写的CSS不生效，核心原因是jQuery Mobile自带样式优先级较高，且你没有命中正确的元素类名，直接复制下面的代码，放到你项目中jQuery Mobile样式文件引入之后的自定义CSS位置即可：

/* 清除单选容器默认上下外边距 */
.ui-controlgroup-vertical .ui-radio {
  margin: 0 !important;
}

/* 调整单选按钮内边距，实现紧凑效果 */
.ui-controlgroup-vertical .ui-radio .ui-btn {
  margin: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-radius: 0 !important;
}

/* 保留单选组首尾按钮圆角，避免样式异常 */
.ui-controlgroup-vertical .ui-radio:first-child .ui-btn {
  border-top-left-radius: 0.3em !important;
  border-top-right-radius: 0.3em !important;
}
.ui-controlgroup-vertical .ui-radio:last-child .ui-btn {
  border-bottom-left-radius: 0.3em !important;
  border-bottom-right-radius: 0.3em !important;
}

调整说明 #

• 代码里的5px是按钮上下内边距值，你可以根据想要的紧凑度自行修改，数值越小按钮越紧凑
• 样式里的!important不能删，否则会被jQuery Mobile的默认样式覆盖，导致调整无效
• 上述选择器只会命中垂直排列的单选按钮组，不会影响页面其他按钮、表单元素的原有样式
• 如果你的单选按钮没有放在.ui-controlgroup-vertical容器里，把选择器里的.ui-controlgroup-vertical 前缀删掉即可生效

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