title: Enable list item to clickable area in jQuery Mobile
body: <p><strong>Description:</strong>
  Following code piece is used in Android/iPhone for Roundabout carousal. Each LI is <code>100px x 100px</code> in width and height. And link is top of the LI. </p>
  
  <pre><code>  &lt;div data-role="content" data-theme="aa"&gt;
      &lt;ul class="roundabout-holder"&gt; 
           &lt;li class="roundabout-moveable-item"&gt;
               &lt;a href="&lt;%= url_for :action =&gt; :graph %&gt;"&gt; &lt;%= label_for:link %&gt;&lt;/a&gt;&lt;/li&gt; 
           &lt;li class="roundabout-moveable-item"&gt; 
               &lt;a href="&lt;%= url_for :action =&gt; :graph %&gt;"&gt; &lt;%= label_for:link %&gt;&lt;/a&gt;&lt;/li&gt; 
           &lt;li class="roundabout-moveable-item"&gt; 
               &lt;a href="&lt;%= url_for :action =&gt; :graph %&gt;"&gt; &lt;%= label_for:link %&gt;&lt;/a&gt;&lt;/li&gt; 
           &lt;li class="roundabout-moveable-item"&gt; 
               &lt;a href="&lt;%= url_for :action =&gt; :graph %&gt;"&gt; &lt;%= label_for:link %&gt;&lt;/a&gt;&lt;/li&gt; 
           &lt;li class="roundabout-moveable-item"&gt; 
               &lt;a href="&lt;%= url_for :action =&gt; :graph %&gt;"&gt; &lt;%= label_for:link %&gt;&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.roundabout-holder {
      list-style: none;
      width: 75%;
      height: 10em;
      margin: 1em auto;
  }
  
  .roundabout-moveable-item {
      height: 100px;
      width: 100px;
      border: 1px dotted #999;
      background-color: #f3f3f3;
      font-size: 2em;
      cursor: pointer;
  }
  </code></pre>
  
  <p><strong>Current behavior</strong>:
  In the items, Anchor only behave as link (jump to the given reference)</p>
  
  <p><strong>Expected behavior:</strong>
  When user clicked on LI, it should jump to given reference. </p>
  
  <p><strong>Relative resource from stackoverflow</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a">How do I make the whole area of a list item in my navigation bar, clickable as a link?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/3486110/make-a-list-item-clickable-html-css">Make A List Item Clickable (HTML/CSS)</a></p>
  
  <p>eventhough solution come to near my issue. i need to find generic solution. Because I cant set padding for all at onece or one by one, because link label may change time to time.</p>
  
  <p>Added and tested asfollows
  <code>display:inline-block;</code> and <code>padding</code> then issue is sorted, but time to time padding should be change.</p>