无序列表中的奇怪空间

Question

我正在尝试使用我网站上传的最新图片设计缩略图。在项目中使用bootstrap twitter。 缩略图工作正常，除了一些细节。缩略图包含3行，包含4列，在第二行中，在第一个，第二个和第三个列表位置中存在空格。这是一个屏幕：

html代码是用Smarty生成的，它是代码，并且工作正常：

<ul class="thumbnails lastFotos">
{foreach from=$last_fotos item="foto"}
     <li class="span1"><a class="thumbnail"><img src="{$BASE_URL}/assets/img/galeria/{$foto.Nombre}"  alt="{$foto.Nombre}"/></a></li>
{/foreach}
</ul>

缩略图，缩略图和span1是Bootswrap的类，而lastFotos是为我创建的类，用于更改Bootstrap的某些配置：

ul.lastFotos{ margin-left: 22px; }

ul.lastFotos li{ display: inline; margin-bottom: 7px; margin-left: 5px; }

ul.lastFotos li a{ border-radius: 0; padding: 2px; }

ul.lastFotos li a:hover{ border-color: #8e84b8; }

任何想法？

Answer 1

这是因为图片大小不同，只需height到list或image即可修复

像

ul.lastFotos li {height:60px;}

或

ul.lastFotos li img{width:60px;height:60px;}