對齊在閃亮的多列單選按鈕

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; 
}