Necesito una lista desordenada sin viñetas

He creado una lista desordenada. Siento que las viñetas en la lista desordenada son molestas, por lo que quiero eliminarlas.

¿Es posible tener una lista sin viñetas?

Puede eliminar las viñetas configurando list-style-typea noneen el CSS para el elemento primario (generalmente a <ul>), por ejemplo:

ul {
  list-style-type: none;
}

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

Consulte el Tutorial de listas para obtener un excelente tutorial de las técnicas de formato de listas.

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

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

Bootstrap 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>

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

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

Necesitas usar list-style: none;

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

Pequeño refinamiento a 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;}

Si no puede hacer que funcione en el <ul>nivel, es posible que deba colocarlo 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, use !important:

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

Usé el estilo de lista tanto en ul como en li para eliminar las viñetas. Quería reemplazar las viñetas con un carácter personalizado, en este caso un 'guión'. Eso da un efecto de sangría agradable que funciona 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>

Para eliminar completamente el ulestilo predeterminado:

    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;

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

Descripción Listas

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>

Lo que producirá una lista similar a la siguiente:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

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

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

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

li {
    display: block;
}

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

así que si no puede cambiar el estilo de la lista usando las list-style: none;etiquetas ul o li, primero verifique !importantporque tal vez alguna otra línea de estilo está sobrescribiendo su estilo, si lo arregla, es importante que encuentre un selector más específico y borre lo importante .

Si no es el caso, compruebe que li:beforetal vez tenga el contenido. entonces hazlo:

li:before { dispaly: none; }

 <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>

Lo intenté y observé:

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

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

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