Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
En este artículo, veremos acerca de Primer CSS Menú de selección alineado a la derecha. Un menú de selección proporciona soporte para la navegación del sitio web, el filtrado, etc. Podemos alinear el menú de selección a la derecha usando la clase SelectMenu right-* .
Primer CSS Seleccionar menú Clase alineada a la derecha:
- SelectMenu right-*: esta clase se utiliza para alinear el componente del menú de selección a la derecha. El menú de selección se puede alinear a la derecha con el valor que va del 1 al 12.
Sintaxis:
<div class="SelectMenu right-*">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra el menú de selección alineado a la derecha con el margen de 0.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS Select Menu Right aligned</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Select Menu Right aligned</h2> </div> <div class="d-flex flex-justify-end position-relative m-6"> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Select Courses </summary> <div class="SelectMenu right-0"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem">Java</button> <button class="SelectMenu-item" role="menuitem">C++</button> <button class="SelectMenu-item" role="menuitem">Python</button> <button class="SelectMenu-item" role="menuitem">DSA</button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el menú de selección alineado a la derecha con un margen de 6.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS Select Menu Right aligned</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Select Menu Right aligned</h2> </div> <div class="d-flex flex-justify-end position-relative m-6"> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Select Courses </summary> <div class="SelectMenu right-6"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem">Java</button> <button class="SelectMenu-item" role="menuitem">C++</button> <button class="SelectMenu-item" role="menuitem">Python</button> <button class="SelectMenu-item" role="menuitem"> <svg class="SelectMenu-icon octicon octicon-pin" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"> <path fill-rule="evenodd" d="M10 1.2V2l.5 1L6 6H2.2c-.44 0-.67.53-.34.86L5 10l-4 5 5-4 3.14 3.14a.5.5 0 00.86-.34V10l3-4.5 1 .5h.8c.44 0 .67-.53.34-.86L10.86.86a.5.5 0 00-.86.34z"> </path> </svg> DSA</button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/select-menu#right-aligned
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA