How to get evenly distributed list items?

Question

I am struggling with a list of sketches that won't come out ...

This is a ULwith thumbnails and a link to a thumbnail page, but depending on the length of the anchor text, with the result that the distance between LIwill be different in each element.

Screenshot:

Current 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 is pretty simple:

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

I would post a JSFiddle example, but since this is a template, this is a ton of code, and even then the problem does not seem exactly the same in JSF as on a real site, so I’m most likely to place a link (this is the "Top Messages" list at bottom right ): example here

Does anyone have any idea?

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.