差距小号(Gap between <li>s)

为了避免长列表我有我李集浮动：左使他们交替行。然而，有时这会导致元件之间的无意间隙时在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:

用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;
}

不要忘了从里取出浮

例如： http://jsfiddle.net/LWBdp/3/

IE CSS 问题列似乎并没有为IE浏览器，如果你离开浮动：左在那里它看起来就像你曾在IE，但会看在其他浏览器更好！

有关CSS-列的详细信息，看看这篇文章在W3Schools的