html - 无法将元素放置到内联 block 中

Question

我有一个示例，其中 dateRangeInput 和 actionButton 是动态添加的。

我需要并排放置元素，而不是在 block 中。

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(), #Set up shinyjs  
    tabsetPanel(
      tabPanel("Settings",
               br(),
               fluidRow(
                 column(width = 8,
                        box(
                          title = "Set parameters", id = "RO_05_param_box", width = NULL, solidHeader = TRUE, status ="primary", collapsible = TRUE,
                          fluidRow(
                            box(radioButtons("RO_05_param_radio", h6("Company"), choices = list("A" = 1, 
                                                                                                "B" = 2), selected = 1), br(),
                                dateRangeInput("date_range_view", h6("Timeline"), start = "2019-06-30", end = "2020-06-30"), br(), 
                                selectInput("RO_05_param_select", h6("Distribute over time"), choices = list("Stepped line" = 2, "Linear funcion" = 1))
                            ),

                            box(id= "step_box", dateRangeInput("RO05_date1", h6("Start and end date"), start = "2019-06-30", end = "2020-06-30"), 
                                tags$div(id = 'placeholder_dateRangeInput'),
                                actionButton("add_lag", "Add dates")
                            )

                          )
                        )
                 )
               )
      )
    )
  )
)


server <- function(input, output) {

  observeEvent(input$RO_05_param_select, {
    if(input$RO_05_param_select == 2){
      show(id = "step_box")
    } else {
      hide(id = "step_box")
    }
  })

  observeEvent(input$add_lag, {
    add <- input$add_lag + 1
    addID <- paste0("NO", add)
    daterangeID <- paste0('RO05_date', add)
    removeID <- paste0('remove_lag', add)

    insertUI(
      selector = '#placeholder_dateRangeInput',
      ui = tags$span(id = addID, 
                     tags$span(dateRangeInput(daterangeID, h6("Near lag and far lag"), start = "2019-06-30", end = "2020-06-30")), 
                     tags$span(actionButton(removeID, label= '', icon("minus")))
      )
    )

    observeEvent(input[[removeID]], {
      removeUI(selector = paste0('#', addID))

    })
  })

}

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

我尝试添加这个 css:

#placeholder_dateRangeInput {
    display: inline-block;
}

但它所做的只是缩小了 dateRangeInput 小部件。但是，#placeholder_dateRangeInput 包装了所有添加的元素，所以我认为 css 应该包装在 addID 上。

Answer 1

这里有一种方法可以让你的元素并排排列。在 css 中，你告诉元素你想要在左边是

float:left;

和你想要在右边的元素

float:right;

这应该使它们并排。这是一个使用的例子: https://www.geeksforgeeks.org/how-to-float-three-div-side-by-side-using-css/