内联歪斜的闪亮单选按钮图像

问题描述

我试图在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",img(src = "Plateau distribution.png",img(src = "Double-Peaked distribution.png",img(src = "Edge Peak distribution.png",img(src = "Comb distribution.png",height = 50)
                                       ),choiceValues = list(
                                         "normal","Right skewed","Plateau","Double peaked","Edge peak","Comb"
                                       )
                                    )
                                  )
                    )
    )
)
)

解决方法

为清楚起见，您需要将此添加到用户界面的某处

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