<li>之间的差距

Question

为了避免长列表,我将我的li设置为float:left以便它们交替行.然而,有时当li中的内容占用两行时,这会导致元素之间的无意间隙.我的HTML是:

<ul class="gmc-ingredient-list">                                   
<li>500g Tagliatelle</li>                                                                   
<li>50g wortel</li>                                 
<li>50g ui</li>                                  
<li>50g bleekselderij</li>                                  
<li>100g pancetta</li>                                  
<li>200g half-om-half-gehakt</li>                                  
<li>200g rundergehakt</li>                                  
<li>200 ml Primitivo (rode wijn)</li>                                  
<li>200ml runderbouillon</li>                                  
<li>5 eetlepels tomatenpuree</li>                                  
<li>Olijfolie</li>                                  
<li>Zeezout</li>                                  
<li>Verse peper</li>                                             
</ul>

我的CSS是:

ul.gmc-ingredient-list { 
margin: 0; 
padding: 0;
list-style: none; 
width: 300px; 
}

ul.gmc-ingredient-list li { 
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent; 
list-style: none outside none;
padding: 0px 0 0 20px; 
width: 130px; 
float: left;
}

输出看起来像http://allesoveritaliaanseten.nl/ragu-alla-bolognese/

但也有一些情况下,李占用两行,输出就像http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/

如何停止显示这些差距的列表？

Answer 1

我建议您使用http://www.csscripting.com/css-multi-column/

我使用这个脚本已经很长时间了，与其他可用的可能性相比，它确实非常有效。如果您的网站是使用 AJAX 完成的，则必须修改此行： ut.XBrowserAddEventHandler(window,'load',function() { documentReady = true; processElements(); } );

编辑：此解决方案适用于自 IE6 以来的任何浏览器...