Html/CSS/Js : <i> 태그 앞에 텍스트 표시

Question

이것은 다소 간단한 질문이지만 올바른 해결책은 없습니다.

그러나 나는 에게 0 전에 컬러 블록을 표시 할 것입니다 만 컬러 블록 Afer 즉 4에게 : 내 전단지지도 범례 일하고 , 나는 여기까지 얻었다. i- 태그로 색상을 만듭니다. 전체 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을 표시 할 수 있습니까? 나는 그것의 아주 쉬운 내기를 걸었다. 그러나 나는 지금까지 didnt 한 직업를 완전히 시험해 보았다.

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>';