内联 label 用于 shiny `sliderInput()`

Question

我想让sliderInput() label 与特定小部件的幻灯片一致。

应用方法SO导致了这种行为（小部件标签在图片上放错了位置）：

假定的“内联”顶部幻灯片已折叠。 请问我们如何解决这个问题？

library(shiny)
ui <- fluidPage(
  tags$head(
    tags$style(
      type="text/css", 
      "#inline label { 
        display: table-cell; text-align: center; vertical-align: middle; 
      } 
      #inline .form-group { 
        display: table-row;
      }")
  ),
  tags$div(id = "inline", 
           sliderInput(inputId = "slid", label = "label inline desired", min = 0, value = 50, step = 1, max = 100)
  ),
  sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
)
server <- function(input, output, server) {}
shinyApp(ui, server)

Answer 1

也许，这将满足您的需求

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    tags$head(tags$style(HTML("div#inline label { width: 32%; }
                               div#inline input { display: inline-block; width: 68%;}"))),
    tags$head(
      tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inline .form-group { display: table-row;}")),
    
    div(id="inline",  style="width:35vw;",
        # width = 4,
        div(HTML("<b>Bla bla bla bla bla</b>")),
        br(),
        
        sliderInput("lbl1", "label 1", min = 0, max = 10, value = 1, step = 1),
        sliderInput("lbl2", "my label 2", min = 0, max = 10, value = 2, step = 1),
        sliderInput("lbl3", "long label 3", min = 0, max = 10, value = 3, step = 1),
        sliderInput("lbl4", "very long label 4", min = 0, max = 10, value = 4, step = 1),
        sliderInput("lbl5", "normal label 5", min = 0, max = 10, value = 5, step = 1)
    ),
    sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)