首页 > 解决方案 > 为什么按钮保持在同一行但 textInputs 不?

问题描述

我希望按钮和文本输入在同一行。按钮保持在同一行,但 textInputs 进入新行。我不明白为什么。

ui  =   fluidPage(
    textInput("ti1", "TI1"),
    actionButton("Button1", "B1"),
    actionButton("Button2", "B2"),
    textInput("ti2", "TI2")
)

server <- function(input, output) {}

shinyApp(ui= ui, server=server)

标签: rshiny

解决方案


如下所示,textInput()将其输出包装在 HTMLdiv元素中,而actionButton没有。元素的默认行为div是在视觉上隔离它们的内容,实际上是在元素之前和之后添加换行符,这就是您所看到的。

textInput("ti1", "TI1")
## <div class="form-group shiny-input-container">
##   <label for="ti1">TI1</label>
##   <input id="ti1" type="text" class="form-control" value=""/>
## </div>

actionButton("Button1", "B1")
##  <button id="Button1" type="button" class="btn btn-default action-button">B1</button>

如果您想在一行上有多个文本输入(和/或在各自的行上有几个操作按钮),您可以使用函数fluidRow()和来实现column(),如下所示:

ui <- fluidPage(
    fluidRow(
        column(width = 4,
               textInput("ti2", "TI2")),
        column(width = 4,
               textInput("ti1", "TI1"))
    ),
    fluidRow(actionButton("Button1", "B1")),
    fluidRow(actionButton("Button2", "B2"))
)

server <- function(input, output) {}

shinyApp(ui= ui, server=server)

推荐阅读