如何获得均匀分布的列表项？

Question

我正在努力解决一个不会点击的缩略图列表...

这是一个带有缩略图的UL和指向缩略图页面的链接，但是根据锚文本的长度，它会导致每个项目中LI之间的间距不同。

截图：

目前的CSS是：

.top-posts {
    padding: 0 0 0 65px;
    position: relative;
}

#ajax_hits_counter_popular_posts_widget-2.widget li {
    background: none;
    margin: 0 0 40px 0 !important;
    padding: 0 0 10px;
}

#ajax_hits_counter_popular_posts_widget-2.widget li a {
    vertical-align: -webkit-baseline-middle;
}

#ajax_hits_counter_popular_posts_widget-2.widget img {
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 5px !important;
    border: 4px solid #353434;
}

HTML非常简单：

<li>
    <div class="top-posts">
        <a href="{permalink}" title="{post_title}">{thumbnail-50x50}{post_title}</a>
    </div>
</li>

我发布了一个JSFiddle示例，但由于它是一个模板，结果是大量的代码，即使这样，JSF中的问题也不像在现场网站上那样出现，所以我想想发布链接可能更好（这是右下角的帖子列表）：example here

有人有什么想法吗？

Answer 1

为<li>添加最小高度：

#ajax_hits_counter_popular_posts_widget-2.widget li {
    background: none;
    margin: 0 0 40px 0 !important;
    padding: 0 0 10px;
    min-height: 68px;
}

68px的高度占li的10px底部填充和50px的绝对定位img高度，其边界为8px（2 x 4px）。

li高度会因图像绝对定位而折叠为文字大小，并且不会添加到li的高度。