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

Respuestas:

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:

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