Ho bisogno di un elenco non ordinato senza proiettili


2510

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?

Risposte:


3692

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


@tovmeod Sembra funzionare bene nel mio IE9 (su Win7). (è una pagina complessa, non un semplice POC, forse qualcos'altro ha cambiato il comportamento)
David Balažic

1
Se sei come me e stai anche cercando come rimuovere il rientro, vedi questo - stackoverflow.com/a/13939142/846727
Kunal

6
Oh, quante volte sono tornato qui per la copia / incolla :)
Jonathan.Brink

Bel tocco su imbottitura e margini
Evgenii Klepilin

588

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


2
Se elencassimo le classi per ogni framework CSS, avremmo un casino su StackOverflow. Una rapida ricerca su Google rivela che Bootstrap è stato utilizzato solo dal 2% dei siti Web al suo apice, e sicuramente sta cadendo con l'introduzione di soluzioni più sensate come flexbox e griglia css.
PJ Brunet,

4
In realtà, questa risposta è esattamente quello che stavo cercando. E Bootstrap è utilizzato dal 3,6% dell'intera Internet, quindi non diminuisce. trends.builtwith.com/docinfo/Twitter-Bootstrap Una rapida ricerca su Google rivela che Bootstrap è costantemente inserito nella categoria "framework CSS più popolari".
Bobort,

209

Devi usare list-style: none;

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

4
Tenere presente che i CSS in linea hanno la precedenza sui CSS nei file. A seconda dell'applicazione / pratiche di sviluppo può essere davvero fastidioso.
Mark Baijens,

39

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

Funziona, ma solo per IE8
Underverse

Non è necessario indossare list-style-type: none;sia il ulche il li. Puoi fare solo uno.
mfluehr,

14

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>

14

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>


5

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;

2

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


1
Se hai intenzione di utilizzare questo metodo, usa il modo semanticamente corretto di inserire un termine in cui definire <dt>e la definizione in quel termine <dd>.
Bobort,

2

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

li {
    display: block;
}

Nota tecnica: funziona perché ignora il displayvalore predefinito di <li>, ovvero display: list-item;.
mfluehr,

0

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

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

-1

Ho provato e osservato:

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

1
Questo in realtà non rimuove i proiettili. Vengono spinti fuori dallo schermo.
mfluehr,

-8

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

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


11
-1 Semplice? Senza CSS? Questo è il motivo per cui molti siti Web sono in uno stato sconvolgente. CSS aggiunge semplicità. Le tabelle non sono la strada da percorrere.
webnoob,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.