38.-Botones divididos en las listas (JQuery Mobile)

     Para crear una lista dividida con una barra de división vertical, coloque dos enlaces dentro del elemento <li>.

jQuery Mobile colocará automáticamente el segundo enlace en el lado derecho de la lista con un icono de flecha derecha. Y el texto dentro del enlace (si lo hubiera) se mostrará cuando un usuario se desplace sobre el icono:

Ejemplo:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

 <div data-role="page" id="pageone">

  <div data-role="main" class="ui-content">

   <h2>Botones divididos</h2>

   <ul data-role="listview" data-inset="true">

    <li>

     <a href="#">

      <img src="c.jpg">

      <h2>Google Chrome</h2>

      <p>Google Chrome es un navegador web gratuito de código abierto. Lanzado en 2008.</p>

     </a>

     <a href="#">Some Text</a>

    </li>

    <li>

     <a href="#">

      <img src="f.jpg">

      <h2>Mozilla Firefox</h2>Firefox es un navegador web de Mozilla. Lanzado en 2004

      <p>.</p>

     </a>

     <a href="#">Some Text</a>

    </li>

   </ul>

  </div>

 </div>

</body>

</html>

Resultado: