How to get evenly spaced list items?

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.

Screenshot:

The current CSS is:

.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:

<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

Anyone have any ideas?