并排放置传单控件，而不是通过HTML/CSS在R/Shiny中垂直堆叠 [英] Placing leaflet controls side-by-side instead of vertically stacked in R/Shiny with HTML/CSS

问题描述

我想做的事情很简单:我希望我的传单控件在行中并排对齐，而不是在列中垂直对齐(就像传单自动执行的那样).

What I want to do is pretty simple: I want my leaflet controls to be aligned side-by-side in rows rather than vertically as columns (as leaflet automatically does).

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

Here is some short example code:

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调用中，请参见代码).

Both the zoom arrows and the layer box are leaflet layer controls. I want them to be side-by-side. I have altered the width of the layer box with HTML tags for that div class (in Shiny's UI call -- refer to code).

我在网络浏览器中打开了该应用程序以检查源.这是我发现的:

I opened the app in my web browser to inspect the source. Here's what I found:

据我所知，这两个传单控件都在类 .leaflet-top .leaflet-left 中(很有意义，它们都在左上角;))，但我不知道如何拆箱.有提示吗?

From what I can tell, both of the leaflet controls are in the class .leaflet-top .leaflet-left (makes sense, they're both in the top-left ;) ), but I can't figure out how to unstack them. Any tips?

推荐答案

尝试添加这些此CSS规则

Try adding these this css rule

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

根据您希望加号和减号的哪一侧，在 right 和 left 之间切换.

Switch between right and left depending on which side you want the plus and minus to be.

这篇关于并排放置传单控件，而不是通过HTML/CSS在R/Shiny中垂直堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！