Css 将按钮置于selectInput旁边

目标

我想将

选择输入

和

操作按钮

并排放置在我的

shinydashboard:：box

的页脚中。无论框的宽度如何，按钮应“相对靠近”选择输入

到目前为止我所尝试的

到目前为止，我尝试了

column

、

splitLayout

或通过

display:inline block

设置样式，但我对以下两种解决方案都不满意：

• 列

  ：根据框的宽度，

  选择输入

  和

  操作按钮

  之间的间隙太大（我可以通过将

  选择输入

  宽度扩展到100%来部分解决这个问题，但宽度太大）

• splitDesign

  ：目前为止最好的选择，但是

  cellWidths

  需要根据方框

  宽度进行调整，并且只能使用100%的
  选择输入
  宽度，对于大方框，第二次拆分的宽度似乎太大

• 内联块

  ：与常规的

  CSS

示例

library(shiny)
library(purrr)
library(shinydashboard)

widths <- c(1, 2,3, 4, 6, 12)

makeBoxes <- function(width, method = c("split", "col", "css")) {
   method <- match.arg(method)
   split <- function(width, count) {
      splitLayout(selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS,
                              width = "100%"),
                  actionButton(paste("ab", width, count, sep = "_"), icon("trash")),
                  cellWidths = c("87.5%", "12.5%"),
                  cellArgs = list(style = "vertical-align: top"))
   }
   col <- function(width, count) {
      fluidRow(column(width = 11,
                      selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS,
                                  width = "100%")),
               column(width = 1,
                      actionButton(paste("ab", width, count, sep = "_"), icon("trash"))))
   }

   css <- function(width, count) {
      fluidRow(div(selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS),
                   style = "display: inline-block; vertical-align: top"),
               actionButton(paste("ab", width, count, sep = "_"), icon("trash")))
   }

   wrap <- function(method, ...)
      switch(method, split = split(...), col = col(...), css = css(...))

   map(seq(1, 12 / width, 1), function(count)
      box(solidHeader = TRUE, title = "Box", status = "info", width = width,
          footer = wrap(method, width, count)))
}

server <- function(input, output) {
}

ui1 <- dashboardPage(dashboardHeader(), dashboardSidebar(),
                     dashboardBody(map(widths, ~ fluidRow(makeBoxes(.x, "split")))))
ui2 <- dashboardPage(dashboardHeader(), dashboardSidebar(),
                     dashboardBody(map(widths, ~ fluidRow(makeBoxes(.x, "col")))))
ui3 <- dashboardPage(dashboardHeader(), dashboardSidebar(),
                     dashboardBody(map(widths, ~ fluidRow(makeBoxes(.x, "css")))))

shinyApp(ui1, server)
shinyApp(ui2, server)
shinyApp(ui3, server)

库（闪亮）
图书馆（purrr）
图书馆（shinydashboard）
宽度我希望这会有用。我把宽度=11改为12，这对我来说很好

这就是你想要的吗

library(shiny)
library(purrr)
library(shinydashboard)

widths <- c(1, 2,3, 4, 6, 12)

makeBoxes <- function(width, method = c("split", "col", "css")) {
method <- match.arg(method)
split <- function(width, count) {
  splitLayout(selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS,
                          width = "100%"),
              actionButton(paste("ab", width, count, sep = "_"), icon("trash")),
              cellWidths = c("87.5%", "12.5%"),
              cellArgs = list(style = "vertical-align: top"))
}
col <- function(width, count) {
  fluidRow(column(width = 12,  # width = 11 -> 12
                  selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS,
                              width = "100%")),
           column(width = 1,
                  actionButton(paste("ab", width, count, sep = "_"), icon("trash"))))
}

 css <- function(width, count) {
  fluidRow(div(selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS),
               style = "display: inline-block; vertical-align: top"),
           actionButton(paste("ab", width, count, sep = "_"), icon("trash")))
}

 wrap <- function(method, ...)
  switch(method, split = split(...), col = col(...), css = css(...))

map(seq(1, 12 / width, 1), function(count)
  box(solidHeader = TRUE, title = "Box", status = "info", width = width,
      footer = wrap(method, width, count)))
}

server <- function(input, output) {
}

ui2 <- dashboardPage(dashboardHeader(), dashboardSidebar(),
                 dashboardBody(map(widths, ~ fluidRow(makeBoxes(.x, "col")))))

shinyApp(ui2, server)

库（闪亮）
图书馆（purrr）
图书馆（shinydashboard）
宽度在此解决方案中，按钮显示在下一行，而不是
选择输入的旁边。这并不奇怪，因为
selectInput
跨越了整个12列。还有其他想法吗？您可以尝试减少SelecInput和actionButton的维度。这不会有帮助，因为
列将跨越所有12列。谢谢你的建议。