title: How to wrap a line of list items in HTML
body: <p>The HTML below is what I'm working with. I want it to be in a line rather than in list format. </p>
  
  <ol>
  <li>If I use float:left, how do I make the div get bigger (vertically) when it "line wraps"?</li>
  <li>If I set display:inline, how can I get it to line wrap for real between the list items rather than on spaces that might not exist (as seen below)?</li>
  </ol>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="singleTiddlerList"&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button center"&gt;Hide All&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button center"&gt;Show All&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button center"&gt;Refresh&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;ResizerMacroPlugin&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;ResourceMacro&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;saveBackupPlugin&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;singleTiddler&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;sliderMacro&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;toggleBackstageEdit&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="javascript:;" class="button"&gt;TopbarPlugin&lt;/a&gt;&lt;/li&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>Edit:</strong> Just for your info, it only needs to work with Chrome and Firefox. It isn't a customer website or anything like that, just a personal file (actually a <a href="http://tiddlywiki.com/" rel="nofollow noreferrer">TiddlyWiki</a>).</p>