Edit Question - KnowledgeHub

Title Body

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> My CSS is: 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; } And the output looks like http://allesoveritaliaanseten.nl/ragu-alla-bolognese/ But there are also some cases in which a li takes up two lines and the output is just fine like <a href="http://allesoveritaliaanseten

Tags (comma-separated) Cancel