Question

The HTML below is what I’m working with. I want it to be in a line rather than in list format.

1. If I use float:left, how do I make the div get bigger (vertically) when it “line wraps”?
2. 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)?

---

 <div class="singleTiddlerList">
    	<li><a href="javascript:;" class="button center">Hide All</a></li>
    	<li><a href="javascript:;" class="button center">Show All</a></li>
    	<li><a href="javascript:;" class="button center">Refresh</a></li>
    	<li><a href="javascript:;" class="button">ResizerMacroPlugin</a></li>
    	<li><a href="javascript:;" class="button">ResourceMacro</a></li>
    	<li><a href="javascript:;" class="button">saveBackupPlugin</a></li>
    	<li><a href="javascript:;" class="button">singleTiddler</a></li>
    	<li><a href="javascript:;" class="button">sliderMacro</a></li>
    	<li><a href="javascript:;" class="button">toggleBackstageEdit</a></li>
    	<li><a href="javascript:;" class="button">TopbarPlugin</a></li>
 </div>

---

Edit: 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 TiddlyWiki).

Answer 1

I think you should use display: inline-block and white-space: nowrap on the <li>s.

If you need support for IE less than version 9, use this hack as well:

display: inline-block;
*zoom: 1;
*display: inline;