jQuery Mobileを使用してリストをスマホ向けに表示するにはul要素にdata-role="listview"属性を追加します。

<ul data-role="listview">
  <li>サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ul>

リストのDEMOです。

リストの右上に補足を表示することができます。
<p class="ui-li-aside">タグで囲んだ文字列が右上に補足として表示されます。

<ul data-role="listview">
  <li>サンプルリスト1<p class="ui-li-aside">補足です</p></li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ul>

補足付きのリストのDEMOです。

通常リストの角は四角になっています。



この角を丸めるにはul要素の属性にdata-inset="true"を指定します。
またこの属性で左右にマージンができます。

<ul data-role="listview" data-inset="true">
  <li>サンプルリスト1<p class="ui-li-aside">補足です</p></li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ul>

角が丸まっているリストのDEMOです。

iPhoneのメールのように、リストの右側に未読件数などを表示するにはリストにclass属性にui-li-countを指定します。

<ul data-role="listview" data-inset="true">
  <li>サンプルリスト1<p class="ui-li-aside">補足です</p></li>
  <li>サンプルリスト2<span class="ui-li-count">32</span></li>
  <li>サンプルリスト3</li>
</ul>

カウントバブルのDEMOです。