Shiny中的框和输入内联，但仅适用于某些输入答案

【问题标题】：Box and input inline in Shiny, but only for some inputsShiny中的框和输入内联，但仅适用于某些输入
【发布时间】：2018-09-10 07:56:16
【问题描述】：

我希望某些输入的标签与输入框内联，而其他输入则显示标准的 Shiny 标准行为。考虑 SBista 在这里给出的答案（和最小的例子）：How to put a box and its label in the same row? (shiny package)

library(shiny)
ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; } 
            .form-group { display: table-row;}")
    ),

    textInput(inputId = "txtInp", label = "Label:"),
    textInput(inputId = "txtInp2", label = "A_longer_label:"),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

这给出了非常整洁的输出，如下所示：

这里的输入框整齐排列。如果我只希望某些标签表现出这种行为（而其他标签则执行正常的 Shiny 操作），我可以创建 id“内联”并将其添加到相关标签周围的 div 中，如下所示：

library(shiny)
ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                #inline .form-group { display: table-row;}")
    ),

    tags$div(id = "inline", textInput(inputId = "txtInp", label = "Label:")),
    tags$div(id = "inline", textInput(inputId = "txtInp2", label = "Label2_not_inline:")),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

现在第三个标签的行为符合预期，但前两个标签并没有整齐地对齐。我想这是因为一个 id 只能使用一次。如何使用一个类来实现多个输入的预期结果？

【问题讨论】：

标签： css r shiny

【解决方案1】：

要实现您想要的，您可以修改css，如下所示：

tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                 .inline .form-group{display: table-row;}")

代码如下所示：

library(shiny)
ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                 .inline .form-group{display: table-row;}")
      ),
    
    tags$div(class = "inline", textInput(inputId = "txtInp", label = "Label:"),
    textInput(inputId = "txtInp2", label = "Label2:")),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

使用此代码，您将获得看起来更清晰的标签，如下所示：

希望对你有帮助！

【讨论】：