Help with styles of listview items

Help with styles of listview items

I am trying to use a list to layout key value pairs very similar to the iPhones contact app



I want the Key right justified and only use 20% of the width
I want the Value to be left justified and use 80% of the width.

I didn't see any ui-grid that met my needs as they all are left justified and split the width evenly

I am a newbie to web development so I'm sure I am making this much harder than it is.

  1. .ui-grid-keyvalue { overflow: hidden; }
  2. .ui-block-key .ui-block-value{ margin: 0; padding: 0; border: 0; float: left;}

  4. .ui-grid-keyvalue .ui-block-key { width: 20%; text-align: right; clear: left; }
  5. .ui-grid-keyvalue .ui-block-value { width: 50%; }
I tried creating my own styles but there must be something magical going on in the jQuery Mobile css because by ui-block-key and .ui-block-value always appear on different lines rather than the same line.  I didn't see anywhere in the jQuery.css where they blocked them together.


Any help would be great