1

我有一个不同图像的列表，每个图像都有一个唯一的链接。仅在 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
}
4

1 回答 1

2

您将包含的“ul”显示设置为“内联”，因此它显示为内联元素并将最后一个列表项向下推。如果您将 #acontent ul 更改为以下内容，它将解决您的问题。另见这个小提琴http://jsfiddle.net/Lv4rz/3/

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

更新：问题实际上不是显示类型，问题是“ul”最初有边距和填充。您无需设置 display:block 即可解决您的问题。您只需要将边距和填充设置为零。

于 2013-06-03T16:21:49.030 回答