将actionButton放置在titlePanel的右侧

Question

我正在使用此UI构建Shiny应用程序。这是nhl-logo.png

ui <- fluidPage(

  titlePanel(tagList(
    img(src = "nhl-logo.png", height = 60, width = 60),
    "PLAY-BY-PLAY"),
    windowTitle = "NHL Play-by-Play"),

  div(style = "position:absolute;right:2em;", 
      actionButton('load_inputs', 'Load inputs'),
      actionButton('save_inputs', 'Save inputs')
  ),

  hr(),

  fluidRow(...)

不幸的是，style不是我想要的，因为它会将那些actionButtons置于比标题更低的级别（NHL LOGO PLAY-BY-PLAY）

如何更改style，以使我的actionButtons与titlePanel处于相同的水平位置？

Answer 1

您可以在包含按钮的span中添加标题。 span和div之间的区别在于span是内联的（div是一个块）。

ui <- fluidPage(
  titlePanel(tagList(
    img(src = "nhl-logo.png", height = 60, width = 60),
    span("PLAY-BY-PLAY", 
         span(actionButton('load_inputs', 'Load inputs'),
              actionButton('save_inputs', 'Save inputs'), 
              style = "position:absolute;right:2em;")
    )
  ),
  windowTitle = "NHL Play-by-Play"
  ),
  hr(),
  fluidRow()
)

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

shinyApp(ui, server)