Is there a way to add space between list items within a jQuery mobile listview? I have tried adding margins to each list item, which works fine, but it creates borders on the left and right sides of the listview that are especially visible in the gaps. Here is an example in this jsfiddle: http://jsfiddle.net/2BhAd/3/. I attempted to resolve the issue by setting the border of the listview to none but that did not work. CSS:
.listitem {
margin-top: 10px !important;
}
#list {
border:none !important;
}
HTML:
<ul id="list" data-role="listview" data-theme="b" data-inset="true">
<li class="listitem"><a href="#">
<img src="http://placehold.it/100x100">
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
</li>
<!-- ... -->
</ul>