jQTouch detail style

I’m working on a mobile application for the iPhone and I am using jQTouch to make the UI look like an iPhone app. jQTouch seriously helps you to quickly create a nice looking UI  but sometimes you need to write your own css to create the layout you want.

I needed a detail page with data shown like the contact details do on the iPhone. Since none of the jQTouch themes had some class that I could use, I sat down and finally came up with this little piece of css:

Now all you need to do is apply the detail class to your li element and place the name and the value inside two divs like so

And the result will look like

Technorati Tags: jQTouch