Deshacerse de las viñetas de <ul>

163

Tengo la siguiente lista:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

Quiero deshacerme de las balas, así que intenté:

 ul#otis {
 list-style-type: none;
 }

Sin embargo, eso no funcionó. ¿Cuál es la forma correcta de eliminar las viñetas de la lista que se muestra?

html html-lists

— Sam Khan
fuente

1

Su HTML / CSS actual funciona bien para mí en FF (JSFiddle). ¿Qué navegador estás usando? Ver si list-style: nonefunciona en su lugar.

— Bojangles

1

Probé esto en todos los navegadores y Mac y Windows OS. Estoy usando html5 doctype ...

— Sam Khan

197

Suponiendo que eso no funcionó, es posible que desee combinar el idselector basado en el con el lifin de aplicar el CSS a los lielementos:

#otis li {
    list-style-type: none;
}

Referencia:

list-style-typeen el Centro de desarrolladores de Mozilla .

— David dice reinstalar a Mónica
fuente

¿Cuál es la diferencia de hacer ul#otisy #otis?

— PeeHaa

En realidad no hay uno, yo, um, simplemente no pude ver el idselector que usaste. ¡Ups, lo siento!

— David dice que reinstale a Mónica el

1

¿Dónde en ese enlace puedo encontrar que necesita ser definido en el li?

— PeeHaa

Las primeras dos oraciones: "La list-style-typepropiedad CSS especifica la apariencia de un elemento del elemento de la lista. Como es el único que se predetermina display:list-item" (aunque sí permite que se pueda aplicar a cualquier elemento con una displaypropiedad). Aunque lo definen, por ejemplo, debajo del olelemento. Personalmente, siempre tengo la definición predeterminada para la lista ( ul/ ol) y los lielementos.

— David dice que reinstale a Mónica el

27

Tuve el mismo problema extremadamente irritante ya que el guión no hizo caso de mi hoja de estilo. Entonces escribí:

<ul style="list-style-type: none;">

Eso no funcionó. Entonces, además , escribí:

<li style="list-style-type: none;">

Voila! ¡funcionó!

— John Olav
fuente

20

Para eliminar viñetas de listas desordenadas, puede usar:

list-style: none;

También puedes usar:

list-style-type: none;

Funciona, pero la primera es una forma más corta de obtener el mismo resultado.

— Philpot
fuente

18

El siguiente código

#menu li{
  list-style-type: none;
}

<ul id="menu">
        <li>Root node 1</li>
        <li>Root node 2</li>
    </ul>

Expandir fragmento

producirá esta salida:

la salida es

— Kishan
fuente

15

Intente esto en su lugar, probado en Chrome / Safari

ul {
 list-style: none;
}

— Paul Kaplan
fuente

4

Poner

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

inmediatamente antes de la lista para probarlo. O

<ul style="list-style-type: none;">

— Cosas
fuente

4

Para eliminar la viñeta UL, simplemente puede usar list-style: none;o list-style-type: none;Si todavía no funciona, supongo que hay un problema de prioridad CSS . Puede ser globalmente UL ya definido. Entonces, la mejor manera de agregar una clase / ID a esa UL en particular y agregar su CSS allí. Espero que funcione.

— Rokan Nashp
fuente

4

Esto funcionó perfectamente HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}

— pokumars
fuente

3

Debe haber algo más.

Porque:

   ul#otis {
     list-style-type: none;
   }

debería funcionar

Quizás haya alguna regla CSS que la sobrescriba.

Use su inspector DOM para averiguarlo.

— PeeHaa
fuente

3

Tuve el mismo problema, y la forma en que terminé arreglándolo fue así:

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

Tal vez sea un poco extremo, pero cuando hice eso, funcionó para mí.

Espero que esto haya ayudado

— Braden Best
fuente

3

para hoja de estilo en línea intente este código

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>

— Luke
fuente

1

tu codigo:

ul#otis {
    list-style-type: none;
}

mi sugerencia:

#otis {
    list-style-type: none;

}

en css solo necesitas usar el #idno element#id. Aquí se proporcionan más consejos útiles: w3schools

— Evan
fuente

0

Tuve un problema idéntico

La solución fue que la viñeta se agregó a través de una imagen de fondo , NO a través de list-style-type. Un rápido "fondo: ninguno" y Bob es tu tío!

— Ruskin
fuente