<li> 之间的差距答案

【问题标题】：Gap between <li>s<li> 之间的差距
【发布时间】：2013-01-04 12:52:20
【问题描述】：

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

但也有一些情况，一个 li 占了两行，输出就好了，比如http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/

如何停止显示这些空白的列表？

【问题讨论】：

我看你还是有问题，你可以回复你自己的问题答案吗？

标签： html css html-lists gaps-in-visuals

【解决方案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;
}

不要忘记从 li 中移除浮动

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

IE 问题 CSS 列似乎不适用于 IE，如果您将 float:left 留在其中，它看起来就像您在 IE 中使用的那样，但在其他浏览器中看起来会更好！

有关 css-columns 的更多信息，请查看w3schools 上的这篇文章

【讨论】：

【解决方案2】：

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

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

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

【讨论】：