为了避免长列表，我将 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/ragu-alla-bolognese/
但也有一些情况，一个 li 占用两行，输出也很好，比如http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/ http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/
我怎样才能阻止列表显示这些差距？
使用 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/ http://jsfiddle.net/LWBdp/3/
IE问题CSS 列似乎不适用于 IE，如果您将 float:left 保留在那里，它看起来就像在 IE 中一样，但在其他浏览器中看起来会更好！
有关 css-columns 的更多信息，请参阅这篇文章w3学校 http://www.w3schools.com/css3/css3_multiple_columns.asp
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
