如何獲得均勻間隔的列表項？

這是一個UL以縮略圖和縮略圖的頁面的鏈接，但根據錨文本的長度，它造成的間距LI之間的差異在每個項目中。

截圖：

enter image description here

目前的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

任何人有什麼想法？

來源

2013-12-20 J. Scott Elblein

添加的最小高度爲<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的底部填充和絕對定位img高度50像素與它的8像素（2×4像素）的邊界高度。

li高度摺疊爲文字的大小，因爲圖像是絕對定位的，並且不會增加到li的高度。

來源

2013-12-20 03:14:30 iambriansreed

Aha，使用你的最小高度提示，我將上面的代碼更改爲： 'margin：0 0 15px 0！important; 填充：0; min-height：50px;' 現在它看起來不錯，ty。 –

太棒了。警惕絕對定位的元素。記得投票並接受！ – iambriansreed

是的，我還使用了一個浮動：留在img上，它基本上看起來一樣，所以我只用這個，哈哈。如果它導致任何問題，我會做一些開關。一旦SO允許，我會接受，哈哈。 –

如何獲得均勻間隔的列表項？

回答

相關問題