jQuery Forum

This is a JQM question, not jQuery UI. I will move it to the JQM area.

JΛ̊KE

Your approach is the correct approach. It's absolutely silly to add <a> tags to achieve a particular formatting result when you are not interested in using the list items for navigation.

The listview provides some simple formatting that follows the overall design of jQuery Mobile UI elements, which handle the majority of common use cases.

If you have specific formatting requirements, you have to write your own CSS overrides. You can make a listview item look any way you'd like. To avoid the standard layout, you need to wrap your HTML in an extra <div></div>.

Unless you really need some dynamic listview features (say, filtering), I'd advise ditching the listview altogether and just make your own list and CSS. Listviews create bloated HTML and have always been a jQuery Mobile performance bottleneck.

The biggest hassle in creating your own list CSS tends to be trying to center elements or lay out elements with equal spacing. If you can live with losing some older browsers, look into CSS flex boxes.This is a far superior and easy way to do this. It's great if you are developing iOS or Android hybrid apps, since both platform's browsers support this.

Another tip: I've been using icon fonts for this sort of thing, rather than images, as you gain flexibility to size the icon any size you'd like without loss of quality. FontAwesome is a good starting-point for this approach, and you can create your own icon fonts. jQuery Mobile 1.4 has gone in a slightly different direction, though, with SVG icons.