Javascript Can'；无法正确显示传单图例

我试图展示一些我认为微不足道的东西——在传单地图上展示一个图例。但我已经花了大约6个小时试图让它工作，但没有结果。我所要做的就是显示一个不透明的框，框中有一个小正方形，然后在每个正方形旁边有一个文本标签，给出其颜色的含义

但是不管我怎么做，我只能得到要显示的文本，不能得到任何类型的形状以任何颜色显示，也不能像所有web示例所显示的那样将图例显示在漂亮的灰色框中。以下是Javascript代码：

    function  getColor(s) {
        if ( s === 'Last update <2 hours ago') 
            return 'yellow';
        else if ( s === 'Last update >24 hours ago' ) 
            return 'blue';
        else 
            return 'black';
    }
    var legend = L.control({position: 'topright'});


    legend.onAdd = function (map) {
        var legendDiv =  L.DomUtil.create('div', 'info legend'),
           checkins = ['Last update > 30 days ago', 'Last update >24 hours ago', 'Last update <2 hours ago'],
           title= ['<strong>Marker Color Codes</strong>'],
            labels = [];
        for ( var i=0; i < checkins.length; i++) {
            labels.push( 
                '<i class="square" style="background:' + getColor(checkins[i]) + '"></i>'+ checkins[i] + '')
        }
        legendDiv.innerHTML = labels.join('<br>');


        return legendDiv;
    }

    legend.addTo(map);

我一直在玩各种各样的边框和图例尺寸，所以不要太关注宽度和高度参数。我买不到任何尺寸的衣服来改变现状。以下是显示内容的屏幕截图：

我想看到的正是所有示例所显示的——一个带有灰色背景（颜色不是材质）的方形框，带有一个小正方形的颜色，后跟一个描述该颜色意义的文本字符串

我做错了什么

---

感谢您的帮助。

无论出于何种原因，您的CSS规则似乎没有得到应用

---

正确添加后，您的

图例将显示您设置的规则：
我知道这个问题很老，但我也遇到了同样的问题。L.DomUtil.create（'div'，'info legend'）的css背景色可以通过以下方式更改：


.info.legend{
背景色：白色；
}
共享您所参考的“web示例”的一些链接，甚至屏幕截图。这肯定会帮助人们理解你在说什么。以下是我一直关注的几个问题：div真的有legend类吗？
    .legend { 
        border: 5px solid black;
        font-weight: bold;
        color: blue;
        text-align: left;
        width: 250px;
        height: 240px;
        line-height: 18px;
        background: white;
        opacity: 1;
    }
    .legend i {
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
    }
    .legend square {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin-top: 8px;
    }