如何获得平均间隔的列表项?

I'm wrestling with a thumbnail list that won't tap out ...

我正在绞尽脑汁地想一个不会被点击的缩略图列表……

It's a UL with thumbnails and a link to the thumbnail's page, but depending on the length of the anchor text, it's causing the spacing between the LI's to be different in each item.

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

Screenshot:

截图:

The current CSS is:

当前的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;
}

The HTML is a pretty simple:

HTML非常简单:

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

I'd post a JSFiddle example, but since it's a template it turns out to be a ton of code, and even then, the issue is not appearing quite the same in JSF as it is on the live site, so I figure it's probably better to post the link instead (it's the Top Posts list at the bottom right): example here

我发布一个JSFiddle的例子,但因为它是一个模板,是大量的代码,即使这样,这个问题不是出现在JSF是完全相同的生活网站,所以我想可能是更好的帖子链接而不是(这是高层职位列表底部右):例子

Anyone have any ideas?

谁有什么好主意吗?

1 个解决方案

#1

Add a minimum height to the <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;
}

The height of 68px accounts for the 10px bottom padding on the li and the absolutely positioned img height of 50px with it's 8px (2 x 4px) border.

68px的高度代表了li上10px的底边，而绝对位置的img高度则是50px，边框为8px (2x4px)。

The li height collapses to the size of the text as the image is absolutely positioned and doesn't add to the height of the li.

li高度折叠到文本的大小，因为图像是绝对定位的，不会增加li的高度。