이미지 목록이 Chrome에서 정렬되지 않았습니다.

Question

고유 한 링크가있는 서로 다른 이미지 목록이 있습니다. Chrome에서만 목록의 다섯 번째 항목이 삭제되고 이전 이미지와 정렬되지 않습니다. 관련 코드는 다음과 같습니다. http://jsfiddle.net/leewhite/z4c2S/

다른 브라우저에서도 정상적으로 작동합니다. 도움이 많이 감사!

<div id="acontent"> 
    <ul> 
     <li><a href="#" class="a1">1</a></li> 
     <li><a href="#" class="a2">2</a></li> 
     <li><a href="#" class="a3">3</a></li> 
     <li><a href="#" class="a4">4</a></li> 
     <li><a href="#" class="a5">5</a></li> 
     <li><a href="#" class="a6">6</a></li> 
     <li><a href="#" class="a7">7</a></li> 
     <li><a href="#" class="a8">8</a></li> 
     <li><a href="#" class="a9">9</a></li> 
     <li><a href="#" class="a10">10</a></li> 
    </ul> 
</div> 

그리고 CSS는 다음과 같습니다 :

html로는

당신은 포함 "UL"표시가 설정 한

#acontent { 
    position:relative; 
    display:block; 
    float:left; 
    width:370px; 
    height:200px; 
    margin-left:10px; 
} 
#acontent ul { 
    list-style:none; 
    display:inline; 
} 
#acontent li { 
    list-style:none; 
    display:inline; 
} 
#acontent a.a1 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#F00000 
} 
#acontent a.a2 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#FA0000 
} 
#acontent a.a3 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#AF0000 
} 
#acontent a.a4 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#BF0000 
} 
#acontent a.a5 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#FF0005 
} 
#acontent a.a6 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#CA0000 
} 
#acontent a.a7 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#DA0000 
} 
#acontent a.a8 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#EE0000 
} 
#acontent a.a9 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#A30000 
} 
#acontent a.a10 { 
    width:74px; 
    height:100px; 
    float:left; 
    background-color:#B70000 
} 

Answer 1

는 인라인 요소로 등장하고 추진하고 있도록 "인라인"에 마지막 목록 항목이 아래로. #acontent ul을 다음과 같이 변경하면 문제가 해결됩니다. 이 바이올린을 또한 http://jsfiddle.net/Lv4rz/3/

#acontent ul { 
    list-style:none; 
    display:block; 
    margin:0; 
    padding:0; 
} 

업데이트를 참조하십시오 : 문제는 실제로 디스플레이 유형이 아닌, 문제는 "UL은"원래 마진과 패딩을 가지고있다. 문제를 해결하려면 display : block을 설정할 필요가 없습니다. 마진과 패딩을 0으로 설정해야합니다.