Css 闪亮1.0.5使滑块与标签对齐

我正在尝试制作几个滑块，其中标签位于滑块的左滑块上，而不是其顶部

我看到了以下两种解决方案：

---

但是，它们似乎不适用于新的闪亮模板。标签和滑块确实是内联的，但滑块的大小确实缩小了

如果我手动将.irs线宽设置为特定的像素数，我会得到一个合适大小的滑块，但在不同的屏幕上或窗口最小化时，它看起来很糟糕。如果我试着让它“自动”或“100%”，我会回到一个“点”而不是滑块

可复制示例：

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    width = 4,
    div(HTML("<b>Bla bla bla bla bla</b>")),
    br(),
    tags$head(
      tags$style(type="text/css", 
                 "label.control-label, .selectize-control.single { 
                 display: table-cell; 
                 text-align: center; 
                 vertical-align: middle; 
                 } 
                 label.control-label {
                 padding-right: 10px;
                 }
                 .form-group { 
                 display: table-row;
                 }
                 .selectize-control.single div.item {
                 padding-right: 15px;
                 }
                 .irs-line{
                 width: 100%;
                 }")
    ),
    sliderInput("lbl1", "label 1", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl2", "label 2", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl3", "label 3", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl4", "long label number 4", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl5", "label 5", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl6", "label 6", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl7", "label 7", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl8", "label 8", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl9", "label 9", min = 0, max = 10, value = 0, step = 1)
  )
)
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

库（闪亮）
ui我不是专家，但我将分享我所知道的：

您始终可以使用相对大小在div上配置小部件。
例如使用
宽度：10vw
（vw指屏幕宽度）和
高度：10vh
（vh指屏幕高度）

我应用了这个并修改了你的代码，似乎对我有用

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    div(style="width:10vw;",

    width = 4,
    div(HTML("<b>Bla bla bla bla bla</b>")),
    br(),
    tags$head(
      tags$style(type="text/css", 
                 "label.control-label, .selectize-control.single { 

                 text-align: center; 
                 vertical-align: middle; 
                 } 
                 label.control-label {
                 padding-right: 20vw;
                 }
                 .form-group { 
                 display: table-row;
                 }
                 .selectize-control.single div.item {
                 padding-right: 20vw;
                 }
")
    ),
    sliderInput("lbl1", "label 1", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl2", "label 2", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl3", "label 3", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl4", "long label number 4", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl5", "label 5", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl6", "label 6", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl7", "label 7", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl8", "label 8", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl9", "label 9", min = 0, max = 10, value = 0, step = 1)
      )
    ))
  )

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

库（闪亮）
ui“标签和滑块确实是内联的，但滑块的大小确实缩小了”我真的看不出有没有CSS在大小上的区别。你能添加一个你的意思的小屏幕截图吗？我更新了描述。在我最初编写的代码中，我将
width:300px
，但如果您将其更改为
width:100%
或
width:auto
，它将变成屏幕截图上显示的内容。