HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Listas W3.CSS

❮ Anterior Próximo ❯
  • ×
    mike
    diseñador web
  • ×
    apoyo
    _
  • ×
    jane
    contable

Lista básica

La clase w3-ul se usa para mostrar una lista básica:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista bordeada

La clase w3-border agrega un borde alrededor de la lista:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Encabezado de lista

Un ejemplo de cómo agregar un elemento de encabezado dentro del elemento de la lista:

  • nombres

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista como una tarjeta

Las clases w3-card- number se pueden usar para mostrar una lista como una tarjeta:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista centrada

La clase w3-center se puede usar para centrar los elementos de la lista en una lista:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista de colores

Las clases de color w3- se pueden usar para agregar un color a la lista:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Elemento de la lista de colores

Las clases w3- color se pueden usar para agregar un color al elemento de la lista:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista flotante

La clase w3-hoverable agrega un color de fondo gris a cada elemento de la lista al pasar el mouse:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Si desea un color de desplazamiento específico, agregue cualquiera de las clases w3-hover- color a cada elemento <li>:

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>

Elemento de lista que se puede cerrar

Haga clic en la "x" para cerrar/ocultar un elemento de la lista:

  • Jill ×
  • Adán ×
  • víspera ×

Ejemplo

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>

Sugerencia: el código HTML × entidad es el icono preferido para los botones de cierre (en lugar de la letra "X").

Lista con relleno

Las clases de relleno w3 se pueden usar para agregar relleno a los elementos de la lista: 

  • Jill
  • víspera
  • Adán
  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>

Lista de avatares

  • ×
    mike
    diseñador web
  • ×
    apoyo
    _
  • ×
    jane
    contable

Ejemplo

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>

Sugerencia: aprenderá más sobre las clases w3-bar en nuestros capítulos Barras W3.CSS y Navegación W3.CSS .

Ancho de lista

Las listas tienen un ancho del 100% por defecto. Use la propiedad de ancho para cambiar esto.

Ejemplo

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

30% ancho:

  • Jill
  • Adán

50% ancho:

  • Jill
  • Adán

80% ancho:

  • Jill
  • Adán

pequeña lista

Use la clase w3-tiny para mostrar una pequeña lista: 

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista pequeña

Use la clase w3-small para mostrar una pequeña lista:  

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista grande

Use la clase w3-large para mostrar una lista grande: 

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista grande

Use la clase w3-xlarge para mostrar una lista extra grande:  

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista XXL

Use la clase w3-xxlarge para mostrar una lista XXLarge:  

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista XXXL

Use la clase w3-xxxlarge para mostrar una lista XXXLarge:  

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lista gigante

Use la clase w3-jumbo para mostrar una enorme lista "jumbo":  

  • Jill
  • víspera
  • Adán

Ejemplo

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

❮ Anterior Próximo ❯