Question

这里的简单问题：我的传单地图弹出窗口上的间距似乎被卡在双倍空间中。我试图让每一个新行看起来像这样：

 Name: xxx
 Date: xxx

而不是目前的情况：

Name: xxx

Date: xxx

这是我的剧本：

function createPopup(properties, attribute, layer, radius){
//add city to popup content string
var popupContent = '<h3>' + "Name: " + properties.info_firstName + " " + properties.info_lastName + '</h3>';
//add formatted attribute to panel content 

popupContent += "<p><b>Number of Installs:</b> " + properties.GE_Count + "</p>" + "<p><b>Number of Installs:</b> " + properties.GE_Count + "</p>";


//replace the layer popup
layer.bindPopup(popupContent, {
    offset: new L.Point(0,-radius)
});
};

我的CSS：

.leaflet-popup-content-wrapper {
    background-color: #e5e5e5;
    opacity: .8;
}

.leaflet-popup-tip {
    background-color: #e5e5e5;
    opacity: .8;
}

.leaflet-popup-content p, h3{
    color: #191900;
    text-align: left;
    font-family: 'Roboto Slab';
    font-size: 12px
}

提前致谢！

Answer 1

您是否尝试过添加

h3 {
  margin-top: 0;
  margin-bottom: 0;
}

到您的CSS？

Answer 2

这可能只是HTML的一个简单问题。

由于您为每一行使用了段落（<p>标记），因此您会自动获得默认的p样式，包括上边距和下边距。

一个简单的解决方法是删除<p>代码并改为使用换行符<br />。

您的h3标题相同。

您还可以在margin: 0和p上指定h3，因为您似乎已经拥有了CSS规则。

在Leaflet Popup中更改行间距

2 个答案: