对齐在闪亮的多列单选按钮

Question

在我闪亮的应用程序中，我有4个单选按钮，我想呈现为两列和两行。但是，当我运行该应用程序时，标题标签占据第一个位置，使其在第一列中成为三行，在第二列中成为两行。这里的问题是，第二列中的第一个单选按钮与标签对齐，而不是第一列中的第一个单选按钮。我如何纠正这一点？到目前为止的代码如下：

library(shiny) 
radioLab <-list(tags$div(align = 'left', 
         class = 'multicol', 
         radioButtons(inputId = 'typeofanalysis', 
             label = "TRIPS & TRAVELS", 
             choices = c("OVERNIGHT TRIPS - LAST 365 DAYS","OVERNIGHT TRIPS - LAST 30 DAYS", "SAMEDAY TRIPS - LAST 30 DAYS","LONG DURATION TRIPS - 180-365 DAYS"), 
             selected = "OVERNIGHT TRIPS - LAST 365 DAYS", 
             inline = FALSE), style = "font-size:75%")) 

multicolLab <- list(tags$head(tags$style(HTML(" 
             .multicol { 
             height: 200px; 
             width: 600px; 
             -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
             -moz-column-count: 2; /* Firefox */ 
             column-count: 2; 
             -moz-column-fill: auto; 
             -column-fill: auto; 
             } 
             ")))) 

ui <- shinyUI(
navbarPage("TITLE", 
    tabPanel("TABULATE", 
     multicolLab, 
      fluidRow( 
       column(width = 6, radioLab, align = "center"), 
       column(6) 
      ) 
))) 

server <- shinyServer(function(input, output) { 

}) 

shinyApp(ui,server) 

Answer 1

你需要你的CSS靶向.shiny-options-group，并调整一些值

.shiny-options-group { 
    height: auto; 
    width: 600px; 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
    -webkit-column-fill: balance; 
    -moz-column-fill: balance; 
    column-fill: balance; 
    margin-top: 0px; 
} 

.control-label { 
    padding-bottom: 10px; 
} 

div.radio { 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding-bottom: 5px; 
}