传单水平控制答案

【问题标题】：Leaflet Controlls Horizontally传单水平控制
【发布时间】：2014-08-11 12:58:49
【问题描述】：

我在地图中放置传单控件时遇到问题。我想水平放置控件，但我不知道是否可以在 Leaflet 中使用？有什么解决办法吗？

【问题讨论】：

【解决方案1】：

leaflet-control css 类如下所示：

.leaflet-control {
    float: left;
    clear: both;
    }

clear: both 是使控件彼此下方的原因。为防止某个控件出现这种情况，只需在该控件的 CSS 类上设置 clear:none，假设该控件具有您可以访问的特定 CSS 类。

【讨论】：

以这个要点为例：gist.github.com/mpfeil/3d831e753f7363db6e3e

【解决方案2】：

传单控件是 HTML 和 CSS：使用您的 web developer extensions，找到它们的类和 ID，并编写 CSS 以将它们重新定位为水平排列。

【讨论】：

【解决方案3】：

打开leaflet.css，里面有“.leaflet-bar a, .leaflet-bar a:hover”。您可以使用这些 CSS 值。例如添加 float:left;它们将水平对齐。根据传单版本查找第 228 行或附近。

【讨论】：

【解决方案4】：

我发现您必须进入每个控件并自定义 css 和位置，以及 .leaflet-top.leaflet-left。您可以在此处查看我们在 OVRDC 使用的示例 - https://getbounds.com/blog/a-modern-leaflet-toolbar。我真的很想创建一个水平控件插件，您可以在其中添加新控件，或者控件数组或其他东西，但还没有开始。

水平工具栏图像：

【讨论】：