Html 之间的差距<；李>；s

为了避免长列表，我将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>

输出结果如下所示

但也有一些情况下，一个li占用两行，输出就像

---

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

我建议您使用

我使用这个脚本很长一段时间了，与其他可用的脚本相比，它非常有效。如果您的站点使用AJAX，则必须修改以下行： XBrowserAddEventHandler（窗口，'load'，函数（）{documentReady=true；processElements（）；}）

---

编辑：此解决方案适用于IE6之后的任何浏览器…

使用css3，您可以向列表中添加列

ul.gmc-ingredient-list {
    margin: 0;
    padding:0;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0;
    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;
}

别忘了从li上取下浮子

例如：

IE问题 CSS列似乎不适用于IE，如果你离开浮动：留在那里，它将看起来像你在IE中，但在其他浏览器中会更好

---

有关css专栏的更多信息，请参阅

上的这篇文章。我发现您仍然有问题，您可以回答自己的问题吗？

ul.gmc-ingredient-list {
    margin: 0;
    padding:0;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0;
    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;
}