Html/Css/Js：在 <i> 标签之前显示文本

Question

这是一个相当简单的问题，但我无法找到正确的解决方案。 我正在为我的传单地图绘制图例，我已经走到了这一步：

但是我想在色块之前显示0，而只在色块之后显示4。 我正在使用 i-tags 创建颜色。整个 JS 代码如下所示：

function getColor(d) 
            {
              return   d > 4  ?  '#045a8d' : //4
                       d > 3  ?  '#2b8cbe' : //3
                       d > 2  ?  '#74a9cf' : //2
                       d > 1  ?  '#bdc9e1' : //1
                                  '#f1eef6';
}
    ...

    grades = [0, 1, 2, 3, 4];

...


div.innerHTML += '0 ';


     for (var i = 0; i < grades.length; i++) {
      div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + (!grades[i + 1] ? grades[i] : '');}

CSS：

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 0px;
    opacity: 0.7;
}

关于如何在颜色前显示 0 有什么建议吗？我敢打赌它很容易，但到目前为止我所尝试的一切都没有奏效。

Answer 1

因为 i 向左浮动，所以它们将 0 向右移动。如果您查看http://jsfiddle.net/73k05k7u/，我已将 0 和 1 放入一个跨度并将它们也向左浮动。所以现在它全部显示为内联。我还接听了将 4 添加到循环之外的调用，因为您可以在循环完成后执行此操作。使其更具可读性并且需要更少的比较。注意最佳实践，您应该构建一个字符串并设置一次 innerHTML 属性。

// CSS
.legend span{
    float:left;

}

// JS
div.innerHTML += '<span>0 </span>';


 for (var i = 0; i < grades.length; i++) {
  div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ';     
 }
div.innerHTML = div.innerHTML +  '<span>' +  (grades.length -1)+  '</span>';