将传单控件并排放置，而不是使用HTML / CSS在R / Shiny中垂直堆叠

Question

我想要做的很简单：我希望我的传单控件在行中并排排列，而不是像列一样垂直排列（如传单自动执行）。

以下是一些简短的示例代码：

library(shiny)
library(leaflet)

shinyApp(

  ui <- fluidPage(
    leafletOutput("map", width = "100%"), 
    tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
  ), 

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

    output$map <- renderLeaflet({
      leaflet() %>% 
        addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>% 
        addProviderTiles("Esri.WorldImagery", group = "Layer2") %>% 
        addLayersControl(position = "topleft", 
                         baseGroups = c("Layer1", "Layer2"), 
                         options = layersControlOptions(collapsed = F))
    })  # END RENDERLEAFET
  }  # END SERVER
)  # END SHINYAPP

这是输出：

缩放箭头和图层框都是传单图层控件。我希望他们能够并肩而立。我已经使用该div类的HTML标签更改了图层框的宽度（在Shiny的UI调用中 - 参考代码）。

我在网络浏览器中打开了应用以检查来源。这是我发现的：

据我所知，两个传单控件都在类.leaflet-top .leaflet-left中（有道理，它们都在左上角;）），但我无法弄清楚如何取消堆栈他们。有什么提示吗？

Answer 1

尝试添加这些css规则

.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
    float: right;
}

在right和left之间切换，具体取决于您希望加号和减号的哪一方。

Answer 2

我建议使用已确定要显示的类来更改元素的CSS：inline-block和float：无。

display：inline-block不会在元素之后添加换行符，因此该元素可以位于其他元素旁边。 w3School reference for CSS Layout - display
float：none元素不会浮动（将在文本中出现的位置显示）。 w3School reference for CSS Layout - Float

尝试：

.leaflet-top .leaflet-left {
    display:inline-block;
    float: none;
}