Ho bisogno di un elenco non ordinato senza proiettili

Ho creato un elenco non ordinato. Sento che i proiettili nell'elenco non ordinato sono fastidiosi, quindi voglio rimuoverli.

È possibile avere un elenco senza punti elenco?

È possibile rimuovere i proiettili impostando il list-style-typeper noneil CSS per l'elemento padre (in genere una <ul>), per esempio:

ul {
  list-style-type: none;
}

Potresti anche voler aggiungere padding: 0e margin: 0a quello se vuoi rimuovere anche il rientro.

Consulta Listutorial per una panoramica dettagliata delle tecniche di formattazione dell'elenco.

Se stai usando Bootstrap, ha una classe "non stilata":

Rimuovi lo stile elenco predefinito e il riempimento sinistro sugli elementi dell'elenco (solo elementi secondari immediati).

Bootstrap 2:

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

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

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

Devi usare list-style: none;

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

Piccolo perfezionamento delle risposte precedenti: per rendere più leggibili le righe più lunghe se si riversano su righe aggiuntive dello schermo:

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

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

Se non riesci a farlo funzionare a <ul>livello, potrebbe essere necessario posizionarlo list-style-type: none;a <li>livello:

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

È possibile creare una classe CSS per evitare questa ripetizione:

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

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

Se necessario, utilizzare !important:

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

Ho usato lo stile list sia su ul che su li per rimuovere i proiettili. Volevo sostituire i proiettili con un carattere personalizzato, in questo caso un "trattino". Questo dà un effetto ben rientrato che funziona quando il testo si avvolge.

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>

Per rimuovere completamente lo ulstile predefinito:

    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;

Se si desidera ottenere ciò con il solo HTML puro , questa soluzione funzionerà su tutti i principali browser:

Elenchi di descrizioni

Semplicemente usando il seguente 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>

Che produrrà un elenco simile al seguente:

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

Esempio qui: https://jsfiddle.net/zumcmvma/2/

Riferimento qui: https://www.w3schools.com/tags/tag_dl.asp

Questo ordina un elenco in verticale senza punti elenco. In una sola riga!

li {
    display: block;
}

se stai sviluppando un tema esistente, è possibile che il tema abbia uno stile di elenco personalizzato.

quindi se non puoi cambiare lo stile dell'elenco usando list-style: none;nei tag ul o li, controlla prima !importantperché forse un'altra linea di stile sta sovrascrivendo il tuo stile, se! importante lo ha riparato, dovresti trovare un selettore più specifico e cancellare il! important .

se non è il caso, controlla che li:beforeforse abbia il contenuto. Quindi fa:

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>

Ho provato e osservato:

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

Nel caso in cui si desideri mantenere le cose semplici senza ricorrere a CSS, ho appena inserito una delle  mie righe di codice. Vale a dire, <table></table>.

Sì, lascia alcuni spazi, ma non è una brutta cosa.