r - 闪亮的单选按钮图像与内联倾斜

Question

我正在尝试在dashboardBody 内的fluidRow 内的单选按钮中使用图像，但按钮和图像出现奇怪的倾斜。

问题似乎与行换行有关，因为如果按钮可以放在第一行中，它们看起来很正常。但是，我希望图像的大小至少是下面代码中指定的大小，并且没有足够的空间让它们全部放在第一行。

有没有人遇到过类似的问题，你是怎么解决的？

这是代码：

dashboardBody(
    tabItems(
      tabItem(tabName = "prices", 
                       fluidRow(
                         column(12, radioButtons(inputId = "rb", label = "Select distribution", inline = TRUE,
                                       choiceNames = list(
                                         img(src = "Normal Distribution.png", width = 100, height = 50),
                                         img(src = "Right-Skewed Distribution.png", width = 100, height = 50),
                                         img(src = "Plateau Distribution.png", width = 100, height = 50),
                                         img(src = "Double-Peaked Distribution.png", width = 100, height = 50),
                                         img(src = "Edge Peak Distribution.png", width = 100, height = 50),
                                         img(src = "Comb Distribution.png", width = 100, height = 50)
                                       ),
                                       choiceValues = list(
                                         "Normal",
                                         "Right skewed",
                                         "Plateau",
                                         "Double peaked",
                                         "Edge peak",
                                         "Comb"
                                       )
                                    )
                                  )
                    )
    )
)
)

Answer 1

为了清楚起见，您需要将其添加到您的 ui 某处

tags$head(
    tags$style(
      HTML(
        ".radio-inline { 
                    margin-left: 0px;
                    margin-right: 10px;
          }
         .radio-inline+.radio-inline {
                    margin-left: 0px;
                    margin-right: 10px;
          }
        "
      )
    ) 
  )