我已经将自己编码到一个CSS角中。我有一个图像列表,使用无序列表显示在彼此旁边。无序列表被放置在固定宽度的DIV中,这样每3个图像,接下来的3个图像将显示在下一个“行”上。
UL中的每个LI不仅显示图像,还显示各种各样的东西,例如:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<a href=""><img src="" /></a>
<p>Description</p>
</li>
</ul>
</div>
这在大多数浏览器中都可以正常工作,除了IE7。IE7将图像显示在彼此下方,而不是彼此相邻。我从经典的水平菜单栏技术中知道,可以通过将LI的float设置为Left来解决这个问题。这不适合我的情况,因为我不知道每个李的高度,这取决于内容。对于每一个LI,其高度不同,会出现一些非常奇怪的布局情况,例如,一个图像位于空行的右侧。以下是我的CSS的精简版:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
基本上,我只想让IE7听我的话并尊重内联块语句,它应该显示彼此相邻的元素。