圖片列表在Chrome中未對齊

Question

我有一張不同圖片的列表，每張圖片都有一個唯一的鏈接。僅在Chrome瀏覽器中，列表中的第5項會丟失，並且與前面的圖像不一致。相關的代碼在這裏：http://jsfiddle.net/leewhite/z4c2S/

它在其他瀏覽器中正常工作。任何幫助非常感謝！

的HTML是：

<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是：

#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

你有含「UL」顯示設置爲「內聯」，所以它表現爲一個內聯元素和推最後一個列表項下來。如果您將#Accept ul更改爲以下內容，它將解決您的問題。另見本小提琴http://jsfiddle.net/Lv4rz/3/

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

更新：這個問題是不實際的顯示類型，問題是「UL」原本margin和padding。你不需要設置display：block來解決你的問題。你只需要將margin和padding設置爲零。