title: multiple rows using inline-block and percentage width
body: <p>within a jquery mobile popup I would like to show five links per rows.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-role="page" id="home"&gt;
      &lt;a href="#popup1" id="btn1" data-role="button" data-rel="popup"&gt;button 1&lt;/a&gt;
      &lt;a href="#popup2" id="btn2" data-role="button" data-rel="popup"&gt;button 2&lt;/a&gt;
  
      &lt;div data-role="popup" id="popup1" class="ui-content"&gt;
          &lt;a href="#"&gt;111&lt;/a&gt;
          &lt;a href="#"&gt;222&lt;/a&gt;
          &lt;a href="#"&gt;333&lt;/a&gt;
          &lt;a href="#"&gt;444&lt;/a&gt;
          &lt;a href="#"&gt;555&lt;/a&gt;
          &lt;a href="#"&gt;666&lt;/a&gt;
          &lt;a href="#"&gt;777&lt;/a&gt;
          &lt;a href="#"&gt;888&lt;/a&gt;
          &lt;a href="#"&gt;999&lt;/a&gt;
      &lt;/div&gt;
      &lt;div data-role="popup" id="popup2" class="ui-content"&gt;
          &lt;a href="#"&gt;111&lt;/a&gt;
          &lt;a href="#"&gt;222&lt;/a&gt;
          &lt;a href="#"&gt;333&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a {
      display: inline-block;
      width: 20%
  }
  </code></pre>
  
  <p>When I click button 1 popup correctly shows 9 links splitted into two rows;
  Click on the second button, instead, displays three links all attached. Why?</p>
  
  <p>All can be viewed in <a href="http://jsfiddle.net/5EwTb/3/" rel="nofollow">http://jsfiddle.net/5EwTb/3/</a></p>
  
  <p>Thanks.</p>