如何在Shiny中实现单选按钮并排对齐并调整位置

单选按钮样式调整 #

你当前给.radio-inline设置的200px右外边距是两个按钮间距过大的核心原因，直接修改自定义CSS即可实现相邻靠齐、调整按钮与标签相对位置的需求，修改后完整代码如下：

fluidRow(
  column(12, align='center',
    tags$style(HTML("
      /* 单选按钮组通用样式 */
      .shiny-input-radiogroup .radio-inline {
        margin-right: 30px !important; /* 按需调整两个按钮的间距，数值越小间距越窄 */
        display: inline-flex;
        align-items: center; /* 保证按钮与对应文字垂直居中对齐 */
      }
      /* 若需要将单选按钮放在标签右侧，保留以下代码，不需要则删除 */
      .shiny-input-radiogroup .radio-inline input {
        order: 2;
        margin-left: 8px !important;
        margin-right: 0 !important;
      }
    ")),
    radioButtons("MPL1",
      label="",
      choiceNames=c("(60, 0; 12, 1)","(56, 0; 48, 1)"),
      choiceValues=c(0,1),
      selected= character(0),
      inline=T
    )
  )
)

以上CSS对所有inline布局的单选按钮全局生效，多组题目不需要重复写样式。

• 先掌握CSS基础语法：核心包括选择器规则、优先级逻辑、盒模型、常用布局属性（flex、定位、对齐规则），这部分是所有前端样式调整的通用基础，不受Shiny框架限制。
• 优先用浏览器开发者工具调试：右键点击Shiny应用中你要调整的元素，选择「检查」就能直接看到元素对应的CSS类名、当前生效的样式，还可以实时修改参数预览效果，调试确认后再把样式代码写入Shiny的tags$style中即可，效率远高于盲写代码。
• 积累Shiny组件的默认类名：比如单选按钮对应.shiny-input-radiogroup、下拉框对应.selectize-input、普通按钮对应.action-button等，常用组件的类名多用几次就能记住，后续调整样式的速度会大幅提升。
• 从简单需求入手练手：先从修改按钮颜色、调整输入框尺寸、修改表格行高这类小需求开始练习，熟练后再尝试复杂的全局布局调整。
• 掌握!important的使用场景：如果你的自定义样式没有生效，基本是被Shiny的默认样式覆盖了，给对应CSS属性后加!important即可提升优先级，强制样式生效。

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