Cómo crear una lista desordenada y sin el uso de balas usando CSS en HTML?

Aquí, vamos a aprender cómo crear una lista desordenada y sin el uso de balas usando CSS en HTML?

Anécdota:

Todos queremos que nuestros elementos dentro de la página Web para estar en un orden particular, ya que ayuda en la visualización de la página web de una manera ordenada y bien organizada. La convención es elegir entre varios tipos de listas. Hay muy adelantado en tres tipos de listas: lista ordenada , Lista sin ordenar y Descripción Lista . La gente se selecciona de uno de estos tipos y empezarían a crear una lista class los elementos que desea mostrar en un formulario dispuesto.

Problema:

listas generalmente vienen con numeración, viñetas y otros patrones de punto en cada elemento o una sentencia en función de lo que está dentro de la lista. Pero hay veces en que los desarrolladores no quieren que sus elementos dentro de la lista para estar fuera puntiaguda ni nada. Entonces, ¿qué hacer cuando alguien no quiere ningún viñetas for su lista?

Solución:

Supongamos que un desarrollador está creando una lista desordenada pero él o ella no quiere ningún viñetas for esa lista en particular. La respuesta es sorprendentemente muy simple ya que lo único que tienes que hacer es añadir list-style-type en su lista desordenada. Vamos a entender este paso a paso la solución.

  • Paso 1: En primer lugar, una lista no ordenada se crea con la ayuda de la & lt; ul & gt; etiqueta. Aquí ul destaca for lista desordenada .
  • Paso 2: class los elementos de la lista, utilizamos & lt; li & gt; etiqueta complemento li aquí significa elementos de la lista. Estos elementos de la lista están marcadas con los números , círculos o discos . Pero el class es balas, pequeños puntos negros.
  • Paso 3: Utilizaremos propiedad CSS list-style-type class crear una lista desordenada, pero omitiendo las balas y para eso, vamos a utilizar el atributo estilo . Sabemos que los define los atributos de estilo o especifica un estilo en línea for un elemento en particular.
  • Paso 4: Vamos a utilizar este atributo con el HTML & lt; ul & gt; etiqueta junto con la propiedad CSS list-style-type omitir las balas en nuestra lista desordenada.

Nota: Se sabe que el uso del atributo de estilo anula cualquier uso del estilo que se fija a nivel mundial. Por lo tanto, el atributo de estilo anularía cualquier estilo que se especifica en el HTML & lt; estilo & gt; etiqueta o una hoja de estilo externa.

Valor:

Ahora que sabemos que tenemos que utilizar list-style-type propiedad CSS a crear una lista desordenada y sin las balas pero ¿cuál es el valor de esta propiedad que le ayudará en la eliminación las balas? Por lo tanto, la respuesta es que cuando haya introducido list-style-type en su estilo atributo entonces usted tiene que establecer el list-style-type a ninguno . Esto significa que no deberían ser de cualquier estilo asociado con los elementos de la lista en la lista.

Sintaxis:

Element {
list-style-type: none;
}

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets in CSS</h2>
<ul style="list-style-type:none;">
<li>student</li>
<li>address</li>
<li>branch</li>
</ul>
</body>
</html>

salida

How to create an Unordered List without using Bullets using CSS in HTML? - 4

En el ejemplo anterior, hemos creado una lista no ordenada sin utilizar balas asignando el valor de list-style-type a ninguno .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *