如何将输入滑块彼此相邻放置（闪亮）？

Question

我是一个整体编程（r语言）初学者 我想构建一个闪亮的应用程序，它已经在运行，但我想提高可读性和设计，因此我想将我的输入滑块放在一起，而不是一个接一个地向下。

代码如下：

   library(shiny)  

ui <- (fluidPage(
  titlePanel("Assessment with instant feedback"),
  sidebarPanel(
    h4("x"),
    p("explanation of x"),
    h4("y"),
    p("explanation of y"),
    ),
  mainPanel(
    sliderInput(inputId = "IS", 
      label = "How important is x?",
      min = 1, max = 7,
      value = 1),
    sliderInput("ID",
      "How important is y?",
      min = 1, max = 7,
      value = 1),
    
    div(style = "height: 1px; margin: auto; width: 30%",
      sliderInput("PS",
        "How good are you in x?",
        min = 1, max = 7,
        value = 1),
      sliderInput("PD",
        "How good are you in y",
        min = 1, max = 7,
        value = 1)),
    
    actionButton("submit", "Submit")
    ),
  ) 
) 

server <-  (function(input, output, session) {
  
})

shinyApp(ui=ui,server=server)

我发现这个论坛条目与我的问题相关：RShiny: How to center sliders

提出了两种解决方案，但都不是我想要的。

1. 他们使用fluidRow/columns 解决了这个问题，以订购滑块。但由于我使用了更多的滑块以及显示信息的侧边栏面板，因此无法正常工作。

2. 还给出了与 CSS 相关的解决方案（我完全没有 CSS 知识） 所以我试着玩弄，结果是： div(style = "高度：1px；边距：自动；宽度：30%") 但我只能在右侧进一步移动滑块，而不是在前两个滑块旁边向上移动。

如果可能的话，我宁愿避免使用解决方案 1，所以我想通过 div() 或其他相关的 CSS 命令将滑块彼此相邻放置来解决它。如果它只适用于第一个解决方案，那么至少我知道该往哪个方向前进……

非常感谢您的指导！

谢谢， 丹尼尔

Answer 1

也许你正在寻找这个

library(shiny)

ui <- (fluidPage(
  titlePanel("Assessment with instant feedback"),
  sidebarPanel(
    h4("x"),
    p("explanation of x"),
    h4("y"),
    p("explanation of y"),
  ),
  mainPanel(
    div(style="display: inline-block; width: 300px;",
      sliderInput(inputId = "IS",
                label = "How important is x?",
                min = 1, max = 7,
                value = 1)),
    div(style="display: inline-block; width: 300px;",
        sliderInput("PS",
                    "How good are you in x?",
                    min = 1, max = 7,
                    value = 1)),
    br(),
    div(style="display: inline-block; width: 300px;",
      sliderInput("ID",
                "How important is y?",
                min = 1, max = 7,
                value = 1)),
    
    div(style="display: inline-block; width: 300px;",
        sliderInput("PD",
                    "How good are you in y",
                    min = 1, max = 7,
                    value = 1)),
    div(HTML("<br>")),br(),
    actionButton("submit", "Submit")
  ),
)
)

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

})

shinyApp(ui=ui,server=server)