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

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

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

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

库（闪亮）
图书馆（单张）
shinyApp(
ui%
addLayersControl（position=“topleft”，
基本组=c（“第1层”、“第2层”），
选项=图层控制选项（折叠=F））
})#端部渲染器AFET
}#终端服务器
)#结束SHINYAPP

以下是输出：

缩放箭头和图层框都是传单图层控件。我希望他们肩并肩。我已经用该div类的HTML标记更改了层框的宽度（在Shinny的UI调用中——请参阅代码）

我在我的网络浏览器中打开应用程序来检查源代码。以下是我的发现：

---

据我所知，这两个传单控件都在类

。传单顶部。传单左侧

（有道理，它们都在左上方；），但我不知道如何取消它们的堆栈。有什么提示吗？

尝试将这些添加到css规则中

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

---

根据您希望加号和减号位于哪一侧，在

右侧

和

左侧

之间切换。

我建议更改元素的CSS，这些元素的类已标识为显示：inline block和float:none

显示：内联块不会在元素后添加换行符，因此元素可以位于其他元素旁边
浮动：无元素不浮动（将仅在文本中出现的位置显示）

尝试：

---

因此，这适用于并排获取+和-箭头，但我希望图层控制框（带有图层1和图层2）位于箭头旁边。按照您的示例，我尝试了以下方法：

.paile-control-layers.paile-control-layers-expanded.paile-control>a{float:right；}

，但该方法无效。有什么见解吗？

>a

代表什么？虽然此代码可以回答问题，但提供有关如何和/或为什么解决问题的附加上下文将提高答案的长期价值。感谢@Nic3500的反馈。编辑。

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