如何将一个盒子和它的标签放在同一行？（闪亮包装）答案

【问题标题】：How to put a box and its label in the same row? (shiny package)如何将一个盒子和它的标签放在同一行？（闪亮包装）
【发布时间】：2014-01-17 23:37:51
【问题描述】：

在 Shiny 中，假设我正在使用 textInput，字段/框始终显示在标签下方。有没有办法可以强制他们在同一行？

即Label: BOX

而不是

Label:

Box

【问题讨论】：

标签： r shiny

【解决方案1】：

这是一个非常古老的问题，但认为回答它可能对偶然发现此问题的人有用。

添加这个 css 有助于在输入旁边实现标签

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

这是一个示例应用：

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:"),
    numericInput(inputId = "numInp", label = "Label:", value = 0)
  )
)

server <- function(input, output){}


shinyApp(ui, server)

应用程序的输出如下：

编辑： 为了解决 @fiftace 的 仅将其应用于单个输入的问题，我将输入包装在一个带有 id 的 div 中，并将 css 修改为仅应用于该 ID，如下所示：

library(shiny)

ui <- fluidPage(

  fluidRow(

    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", textInput(inputId = "txtInp", label = "Label:")),
    numericInput(inputId = "numInp", label = "Label:", value = 0)
  )
)

server <- function(input, output){}


shinyApp(ui, server)

这样你的输出看起来如下：

【讨论】：

您的解决方案在 SO 上是最好的 :) 您如何使其适用于单个输入（因此其余部分保持不变）？
@fithace ，您可以提供 ID 而不是使用 label 和 .form-group，这样它只会适用于该特定元素。
嗯，在你的例子中，如果我在前面的标签和 .form-group 类中添加一个 id，它就不起作用。 IE。 tags$style(type="text/css", "#txtInp label{ display: table-cell; text-align: center; vertical-align: middle; } #txtInp.form-group { display: table-row;} ”）。我在这里没有错吗？
@fithace，你可以看看代码的编辑部分。如果要将其应用于多个输入，则可以使用 class 属性而不是 id 属性。希望对您有所帮助！
谢谢！我不能让课程正常工作（用 .my_inline_class 替换 #inline ，然后用 class=my_inline_class 替换 div 不起作用）。为了试图澄清这个问题，我在这里提出了一个新问题（stackoverflow.com/questions/49588582/…）；虽然如果那是不礼貌的，我会删除它。

【解决方案2】：

看看 fileInput 的 HTML 输出，例如

fileInput("myfile", "Normal Label")

它生成的 HTML 是：

<label>Normal Label</label>
<input id="myfile" type="file"/>
<div id="myfile_progress" class="progress progress-striped active shiny-file-input-progress">
  <div class="bar"></div>
  <label></label>
</div>

标签元素默认有换行符。您需要更改 CSS 以摆脱它，即您需要添加类似

shinyUI(bootstrapPage(
  tags$head(    
    tags$style("label {display:inline;}")
  ),
  fileInput("myfile", "Inline Label")
))

这当然会影响所有标签元素，而不仅仅是这个。如果您只想修改这个，您需要直接在您的应用程序中包含 HTML 代码。您可以通过使用 HTML 函数来做到这一点（注意附加的 CSS 语句）。

shinyUI(bootstrapPage(
  HTML('
  <label style="display: inline;">Inline Label</label>
    <input id="myfile" type="file"/>
    <div id="myfile_progress" class="progress progress-striped active shiny-file-input-progress">
    <div class="bar"></div>
    <label></label>
    </div>
')
))

【讨论】：

我很困惑——OP 从未提及任何关于 fileInput 对象的内容。这与使 textInput 标签内联有什么关系？