< li>之间的间隙 [英] Gap between <li>s
问题描述
为了避免长列表,我将我的li设置为float:left,以便它们交替行。然而,有时,当li中的内容占据两行时,这导致元素之间的无意间隙。我的HTML是:
To avoid long lists I've got my li set to float: left so that they alternate rows. However, on occasion this causes an unintentional gap between elements when the content in a li takes up two lines. My HTML is:
<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/
But there are also some cases in which a li takes up two lines and the output is just fine like http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/
如何停止显示这些缺口的列表?
How can I stop the list showing those gaps?
推荐答案
css3您可以向列表中添加列
With css3 you can add columns to your lists
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中删除浮动
don't forget to remove the float from the li
示例:
http://jsfiddle.net/LWBdp/ 3 /
IE问题
CSS列似乎不适用于IE, :留在那里它将看起来像你在IE,但会看起来更好的在其他浏览器!
IE Problems CSS columns don't seem to work for IE, if you leave the float:left in there it will look like you had in IE but will look better in the other browsers!
有关CSS列的更多信息,请看看这篇文章 w3schools
For more information about css-columns take a look at this article at w3schools
这篇关于< li>之间的间隙的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!