1

我试图创建图例来映射。

图例应采用颜色名称和文本格式。（例如蓝色1-10）

颜色和文本之间有空格的问题，我希望文本与颜色对齐，而不是在中间。文本存在于 div 中间）

您能否建议我如何将文本与颜色附近的左侧对齐？

CSS 文件

#legendWrapper {
position : absolute;
top : 700px;
right: 70px;
} 

 #legend {
    background-color: #FFF;
    margin: 10px;
    padding: 5px;
    width: 150px;
  }

 #legend p {
    font-weight: bold;
    margin-top: 3px;
  }

#legend div {
    clear: both;
}

.color {
    height: 12px;
    width: 12px;
    margin-right: 3px;
    float: left;  
    display: block;     
  }

JS文件

        var legendWrapper = document.createElement('div');
            legendWrapper.id = "legendWrapper";
            parentSelector.appendChild(legendWrapper);

             var legend = document.createElement('div');
             legend.id = 'legend';

             var title = document.createElement('p')
             title.innerHTML = 'Map Title';
             legend.appendChild(title);

             for ( var i  = 0; i < 5  ;i++){
                 var legendItem = document.createElement('div');
                 var color = document.createElement('span');
                 color.setAttribute('class', 'color');
                 color.style.backgroundColor = "blue";
                 legendItem.appendChild(color);

                 var minMax = document.createElement('span');
                 minMax.innerHTML = "6100000" + ' - ' + "9050000";
                 legendItem.appendChild(minMax);

                 legend.appendChild(legendItem);                              

             }
             legendWrapper.appendChild(legend);
4

0 回答 0