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

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中的问题也不像在现场网站上那样出现,所以我认为它可能是最好发布链接(它是右下角的Top Posts列表):这里的例子

有人有主意吗？

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的高度占据了10px底部填充,li绝对定位img高度为50px,边界为8px(2 x 4px).

该li高度崩溃的文字的大小的图像是绝对定位并不会增加的高度li.