首页显示的UL代码正在按下Chrome中的最后一个LI元素

Question

我本周开始了一份新工作，我的职责之一是修复/更新网站。

我们的首页有六个浮动元素，鼠标行为被包裹在UL中。在Firefox和IE中，它看起来很好。

在Chrome中，最后一个li元素比其他元素低大约20个像素（我试图删除"最后一个"元素上的样式，它改变了上边距（-18），但没有改变任何东西）。

该网站位于rlba.com。如果有人有任何建议，我将不胜感激。

Answer 1

要回答您的问题。。。

将styles.css文件中的第274行#flashContainer2 ul设置为宽度为942px，显示为block。这将纠正您正在经历的行为。

但请听j08691和alireza safian的评论，并解决您的问题，以便其他人可以从中学习。

Answer 2

没有理由让你的ul显示：内联，尤其是如果你有一个定义的高度，所以删除你的display属性，让它成为默认值（display:block；）。

然后删除ul上的默认浏览器填充，使其与网站内容容器的左侧齐平。

#flashContainer2 ul {
    width: 940px;
    height: 420px;
    /* display: inline; - remove this */
    padding: 0; /* add this */
}

最后，ul中的li标签宽度为155像素，右侧填充为2像素（因此li实际上为157像素），但ul宽度为940像素。157x6=942px。因此，您可以删除"#flashContainer2ul"上的宽度，使其扩展到容器并变为942px宽，或者从最后一个元素中删除2px填充，使所有li都适合ul。

#flashContainer2 .lastInList {
    padding-right: 0; /* add this */
}