有没有办法在 Shiny 的输入框旁边放置标签？答案

【问题标题】：Is there a way to put labels next to an input box in Shiny?有没有办法在 Shiny 的输入框旁边放置标签？
【发布时间】：2021-05-20 17:36:01
【问题描述】：

我想在输入本身旁边有输入框标签，但只有某些输入。

我在这里找到了解决方案，可以为所有标签 Label next to selectInput 更改它，但是有没有办法让它只用于选定的输入？我的意思是一些 numericInput 可能是通常的方式，其他的将被指定在框旁边。在那个答案中，有人建议“如果您不想弄乱闪亮的默认 CSS，您可以将标签留空并在其旁边创建一个标签，而不是将现有标签强制放在一边”但我不知道如何将其解释为代码，因为我尝试了我认为它所说的内容，但其他标签文本就在 label= 文本所在的位置上方，根本不在它旁边。

我猜应该是内联 CSS 什么的，但除了最基本的 CSS，我什么都不知道。

那么在这个 MRE 中，我怎么能在那个输入框的左边有“框的左边”，而“框的顶部”标签保持在原来的位置？

感谢您提供的任何帮助！

library(shiny)

# Define UI for application
ui <- fluidPage(

    # Application title
    titlePanel("Label Next To Box"),

    # Sidebar with a input 
    sidebarLayout(
        sidebarPanel(
            numericInput(inputId = "left_label",label = "Left of box",value = 123),
            numericInput(inputId = "top_label",label = "On top of box",value=321)
        ),

        # Main
        mainPanel(
        )
    )
)

# Define server logic
server <- function(input, output) {


}

# Run the application 
shinyApp(ui = ui, server = server)

【问题讨论】：

标签： r shiny

【解决方案1】：

如下图使用class属性。

library(shiny)

ui <- fluidPage(

  fluidRow(
    ###  next two tags$head is for sliderInput
    tags$head(tags$style(HTML("div#inlin label { width: 15%; }
                               div#inlin input { display: inline-block; width: 85%;}"))),
    tags$head(
      tags$style(type="text/css", "#inlin label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inlin .form-group { display: table-row;}")
    ),

    ### next two lines for class - use class attribute (.inline instead of #inline)
    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="inline1", class="inline", textInput(inputId = "txtInp", label = "Label Left 1:")),
    numericInput(inputId = "numInp1", label = "Label on top1:", value = 0), 
    tags$div(id="inline2", class="inline", numericInput(inputId = "numInp2", label = "Label Left2:", value = 0)),
    textInput(inputId = "txtInp2", label = "Label on top2:"), 

    tags$div(id = "inlin", style="width:55vw;",
             sliderInput(inputId = "slid", label = "label left 3 ", min = 0, value = 50, step = 1, max = 100, width=200)),
    sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
  )
)

server <- function(input, output){}

shinyApp(ui, server)

【讨论】：