无法将元素放置到内联块

Posted 2023-03-24

【中文标题】无法将元素放置到内联块

【英文标题】：Unable to place element to inline-block

【发布时间】：2019-09-26 03:09:38

【问题描述】：

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

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

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。

【参考方案1】：

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

float:left;

以及你想要在右边的元素

float:right;

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