Necesito una lista desordenada sin viñetas

Question

Necesito una lista desordenada sin viñetas

He creado una lista desordenada. Siento que las viñetas de la lista desordenada son molestas, así que quiero eliminarlas.

¿Es posible tener una lista sin viñetas?

preguntado el 22 de junio de 09 a las 10:06

praveenjayapal

15 Respuestas

Si está usando Bootstrap, tiene una clase "sin estilo":

Elimine el estilo de lista predeterminado y el relleno izquierdo en los elementos de la lista (solo hijos inmediatos).

Arranque 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3 y 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

Arranque 3: http://getbootstrap.com/css/#type-lists

Arranque 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Arranque 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled

respondido 13 mar '21, 10:03

Scott Stafford

Si enumeramos las clases para cada marco CSS, tendríamos un lío en StackOverflow. Una búsqueda rápida en Google revela que Bootstrap solo fue utilizado por el 2% de los sitios web en su punto máximo, y seguramente eso está cayendo con la introducción de soluciones más sensatas como flexbox y css grid. - pj brunet

En realidad, esta respuesta es exactamente lo que estaba buscando. Y Bootstrap es utilizado por el 3.6% de toda Internet, por lo que no está disminuyendo. tendencias.construidocon.com/docinfo/Twitter-Bootstrap Una búsqueda rápida en Google revela que Bootstrap se coloca constantemente en la categoría de "frameworks CSS más populares". - bobort

@PJBrunet Si enumeramos las clases para cada marco CSS, tendríamos muchas más personas obteniendo respuestas a sus preguntas. Además, el OP no mencionó que solo está interesado en una solución CSS pura. - inmydelorean

En lugar de class, usaría id aquí si ul es único. Si no, quédate con la clase. - Timo

Tienes que usar list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>

Respondido 15 Abr '20, 21:04

karim79

Tenga en cuenta que el CSS en línea anula el CSS en los archivos. Dependiendo de las prácticas de aplicación / desarrollo, puede ser realmente molesto. - Marcos Baijens

Pequeño refinamiento de las respuestas anteriores: para hacer que las líneas más largas sean más legibles si se extienden a líneas de pantalla adicionales:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}

Respondido 21 Abr '19, 20:04

charliehoward

Funciona, pero solo para IE8 - Inferior

Es innecesario poner list-style-type: none; tanto en el ul y del li. Puedes hacer solo uno. - mfluehr

Si no puede hacerlo funcionar en el <ul> nivel, es posible que deba colocar el list-style-type: none; en el <li> nivel:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

Puede crear una clase CSS para evitar esta repetición:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Cuando sea necesario, utilice !important:

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>

Respondido 21 Abr '19, 20:04

Antonio Ooi

solía list-style tanto en el ul como en el li para eliminar las balas. Quería reemplazar las viñetas con un carácter personalizado, en este caso un 'guión'. Eso le da un efecto de sangría agradable que funciona bien cuando el texto se ajusta.

ul.dashed-list {
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

Respondido el 07 de Septiembre de 20 a las 15:09

Chris Halcrow

Para eliminar completamente el ul Estilo por Defecto:

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

Respondido 23 Abr '19, 22:04

Masih Jahangiri

Si quisieras lograr esto con puro HTML solo, esta solución funcionará en todos los principales navegadores:

Listas de descripción

Simplemente usando el siguiente HTML:

    <dl>
      <dt>List Item 1</dt>
        <dd>Sub-Item 1.1</dd>
      <dt>List Item 2</dt>
        <dd>Sub-Item 2.1</dd>
        <dd>Sub-Item 2.2</dd>
        <dd>Sub-Item 2.3</dd>
      <dt>List Item 3</dt>
        <dd>Sub-Item 3.1</dd>
    </dl>

Ejemplo aquí: https://jsfiddle.net/zumcmvma/2/

Referencia aquí: https://www.w3schools.com/tags/tag_dl.asp

Respondido 14 Feb 21, 08:02

ShaneB

Si va a utilizar este método, utilice la forma semánticamente adecuada de introducir un término que se definirá en <dt> y la definición de ese término en <dd>. - bobort

Esta es la mejor respuesta a la pregunta, aunque las personas que plantean esta pregunta desconocen esta solución mucho más elegante, por lo que no estarían de acuerdo, pero esta solución produce los mejores resultados. - Cagy79

Esto ordena una lista verticalmente sin viñetas. ¡En una sola línea!

li {
    display: block;
}

Respondido 21 Abr '19, 20:04

matt

Nota técnica: esto funciona porque anula el valor predeterminado display valor de <li>, cual es display: list-item;. - mfluehr

ul{list-style-type:none;}

Simplemente configure el estilo de la lista desordenada como ninguno.

Respondido 29 Jul 20, 18:07

Abuhanzala Rehanansari

Si está desarrollando un tema existente, es posible que el tema tenga un estilo de lista personalizado.

Entonces, si no puede cambiar el estilo de la lista usando list-style: none; en etiquetas ul o li, primero verifique con !important, porque tal vez alguna otra línea de estilo esté sobrescribiendo tu estilo. Si !important lo arregló, debe encontrar un selector más específico y borrar el !important.

li {
    list-style: none !important;
}

Si no es el caso, compruebe la li:before. Si contiene el contenido, haga lo siguiente:

li:before {
    display: none;
}

Respondido el 09 de Septiembre de 20 a las 06:09

Ali_Hr

Puedes ocultarlos usando ::marker pseudo-elemento.

Transparente ::marker

ul li::marker {
  color: transparent;
}

ul li::marker {
  color: transparent;
}

ul {
  padding-inline-start: 10px; /* Just to reset the browser initial padding */
}

<ul>
  <li> Bullets are bothersome </li>
  <li> I want to remove them. </li>
  <li> Hey! ::marker to the rescue </li>
</ul>

::marker contenido vacío

ul li::marker {
  content: "";
}

ul li::marker {
   content: "";
}

<ul>
  <li> Bullets are bothersome </li>
  <li> I want to remove them </li>
  <li> Hey! ::marker to the rescue </li>
</ul>

Es mejor cuando necesita eliminar viñetas de un elemento de lista específico.

ul li:nth-child(n)::marker { /* Replace n with the list item's position*/
   content: "";
}

ul li:not(:nth-child(2))::marker {
   content: "";
}

<ul>
  <li> Bullets are bothersome </li>
  <li> But I can live with it using ::marker </li>
  <li> Not again though </li>
</ul>

Respondido 13 Feb 21, 10:02

m4n0

 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

Respondido 26 Abr '18, 05:04

Oracular Man

Probé y observé:

header ul {
   margin: 0;
   padding: 0;
}

Respondido 21 Abr '19, 20:04

Dadhich Sourav

En realidad, esto no elimina las balas. Simplemente los empujan fuera de la pantalla. - mfluehr

En caso de que desee mantener las cosas simples sin recurrir a CSS, solo puse un   en mis líneas de código. Es decir, <table></table>.

Sí, deja algunos espacios, pero eso no es malo.

Respondido 21 Abr '19, 20:04

Phil

-1 ¿Simple? ¿Sin CSS? Es por eso que muchos sitios web se encuentran en el estado impactante en el que se encuentran. CSS agrega simplicidad. Las tablas no son el camino a seguir. - webnoob

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css or haz tu propia pregunta.

Paul Dixon · Accepted Answer

3855

Puede eliminar viñetas configurando el list-style-type a none en el CSS para el elemento padre (normalmente un <ul>), por ejemplo:

ul {
  list-style-type: none;
}

Es posible que también desee agregar padding: 0 y margin: 0 a eso si también desea eliminar la sangría.

Ver Listutorial para un gran recorrido por las técnicas de formato de listas.

Respondido el 15 de junio de 19 a las 07:06

Paul Dixon

@tovmeod Parece funcionar bien en mi IE9 (en Win7). (es una página compleja, no un simple POC, tal vez algo más cambió el comportamiento) - David Balažic

Si es como yo y también está buscando cómo eliminar la sangría, vea esto: stackoverflow.com/a/13939142/846727 - Kunal

Oh, cuantas veces he vuelto aquí para copiar / pegar :) - Jonathan.Brink

Buen toque en el acolchado y los márgenes - Evgenii Klepilin

Hay una solución mucho más elegante para mostrar listas sin viñetas en la respuesta de @shaneb a continuación. Hace uso del objeto HTML5 'Listas de descripción'. - Cagy79