jQuery Mobile: botones de alineación en cuadrículas

Descripción

Un solo botón se alinea junto con los botones presentes en otras cuadrículas.

Ejemplo

El siguiente ejemplo demuestra el uso de la alineación de la cuadrícula de botones en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <h2>Responsive grid Example Using Anchor Tag</h2>
      <div class = "ui-grid-b ui-responsive">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all">Block A</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all">Block B </a>
         </div>
         
         <div class = "ui-block-c">
            <a class = "ui-btn ui-corner-all">Block C</a>
         </div>
      </div>

      <div class = "ui-grid-a ui-responsive">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all">Block A</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all">Block B </a>
         </div>
      </div>

      <div class = "ui-grid-solo ui-responsive">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all">Block A</a>
         </div>
      </div>

      <a class = "ui-btn ui-corner-all">Out of div tag</a>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como button_grid_alignment.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/button_grid_alignment.html y se mostrará el siguiente resultado.

↰ Previous page