Question

令人惊讶的是，我怎么能完成这么简单的任务呢。

我们希望有一个内联显示的菜单（ul列表），其中，顶部有一个图像，在底部，我们有一个锚。

如上所述：

  <iimg>    <iimg>    <iimg>
 <anchor>  <anchor>  <anchor>

该解决方案也必须对IE 7有效。

我尝试过以文字为中心对齐图片。没运气; 我试过显示：块;在li上，在...上-img ... 我也在这里和那里定义了宽度（但是图像可以有不同的宽度（不确定））; 我试过保证金：0自动;但它以页面为中心，但不在LI上。：///

我可以在这里获得帮助吗？

Answer 1

ul li {
    display: block;
    float: left;
    text-align: center;
}

请务必在ul之后执行clearfix。如：

<div style="clear: both;"></div>

Answer 2

如果您将ul显示为inline-block，并将锚点和图片设置为block，则可以通过margin: 0 auto;将其居中。

Answer 3

我会将图像作为背景图像应用于每个li元素。使用background-position很容易定位，并保持您的HTML标记清洁SEO。然后，您可以使用CSS sprites更快地加载图片。

Answer 4

刚看到这个，可以提供帮助。