Databases
StackOverflow2013
Postsdbo
POGap between <li>s
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGap between <li>s
    text
    copied!<p>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:</p> <pre><code>&lt;ul class="gmc-ingredient-list"&gt; &lt;li&gt;500g Tagliatelle&lt;/li&gt; &lt;li&gt;50g wortel&lt;/li&gt; &lt;li&gt;50g ui&lt;/li&gt; &lt;li&gt;50g bleekselderij&lt;/li&gt; &lt;li&gt;100g pancetta&lt;/li&gt; &lt;li&gt;200g half-om-half-gehakt&lt;/li&gt; &lt;li&gt;200g rundergehakt&lt;/li&gt; &lt;li&gt;200 ml Primitivo (rode wijn)&lt;/li&gt; &lt;li&gt;200ml runderbouillon&lt;/li&gt; &lt;li&gt;5 eetlepels tomatenpuree&lt;/li&gt; &lt;li&gt;Olijfolie&lt;/li&gt; &lt;li&gt;Zeezout&lt;/li&gt; &lt;li&gt;Verse peper&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>My CSS is:</p> <pre><code>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; } </code></pre> <p>And the output looks like <a href="http://allesoveritaliaanseten.nl/ragu-alla-bolognese/" rel="nofollow noreferrer">http://allesoveritaliaanseten.nl/ragu-alla-bolognese/</a></p> <p>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.nl/italiaanse-tomatensoep/" rel="nofollow noreferrer">http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/</a></p> <p>How can I stop the list showing those gaps?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload