R Shiny中行内单选按钮修改margin-top后对齐不一致问题排查

问题描述 #

我在R Shiny的UI中尝试为行内单选按钮增加顶部间距，添加CSS样式.radio-inline {margin-top: 10px;}后，第一个单选按钮的样式和后续按钮不一致，后续按钮的margin-top调整幅度比第一个小。

默认效果代码 #

shinyApp(
  ui <-fluidPage(
    fluidRow(
      wellPanel(
        tags$style(HTML("
#          .radio-inline {margin-top: 10px;}
                        ")),
        radioButtons("selection", label=NULL,inline = TRUE,c("A", "B", "C"),selected = "A"),
        style = "padding: 5px; margin:0px;"),
  )),
  server <- function(input, output, session) {}
)

添加样式后的代码 #

shinyApp(
  ui <-fluidPage(
    fluidRow(
      wellPanel(
        tags$style(HTML("
          .radio-inline {margin-top: 10px;}
                        ")),
        radioButtons("selection", label=NULL,inline = TRUE,c("A", "B", "C"),selected = "A"),
        style = "padding: 5px; margin:0px;"),
  )),
  server <- function(input, output, session) {}
)

原因分析 #

Shiny生成行内单选按钮时，第一个单选按钮被包裹在带有.radio类的容器中，这个容器自带默认的margin-top样式。当你给所有.radio-inline元素设置margin-top:10px时，第一个按钮的顶部间距是父容器的默认margin + 自身的margin-top，而后续的.radio-inline元素没有这个父容器的额外margin，只有自身设置的10px，所以视觉上出现了不一致。

解决方法 #

方法一：给整个单选按钮容器设置顶部间距 #

直接针对单选按钮的ID（这里是#selection）设置margin-top，避免元素层级的样式叠加：

shinyApp(
  ui <- fluidPage(
    fluidRow(
      wellPanel(
        tags$style(HTML("
          #selection {margin-top: 10px;}
                        ")),
        radioButtons("selection", label=NULL, inline = TRUE, c("A", "B", "C"), selected = "A"),
        style = "padding: 5px; margin:0px;"),
    )),
  server <- function(input, output, session) {}
)

方法二：清除父容器默认margin并统一设置 #

先取消.radio容器的默认margin，再给所有.radio-inline设置统一的顶部间距：

shinyApp(
  ui <- fluidPage(
    fluidRow(
      wellPanel(
        tags$style(HTML("
          .radio {margin-top: 0;}
          .radio-inline {margin-top: 10px;}
                        ")),
        radioButtons("selection", label=NULL, inline = TRUE, c("A", "B", "C"), selected = "A"),
        style = "padding: 5px; margin:0px;"),
    )),
  server <- function(input, output, session) {}
)

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