Come rimuovere il rientro da una voce di elenco non ordinata?

Voglio rimuovere tutti i rientri da ul. Ho provato a installare margin, padding, text-indenta 0, ma senza alcun risultato. Sembra che l'impostazione text-indentdi un numero negativo funzioni, ma è davvero l'unico modo per rimuovere il rientro?

Imposta lo stile dell'elenco e il riempimento a sinistra su nulla.

ul {
    list-style: none;
    padding-left: 0;
}​

ul {
  list-style: none;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Per mantenere i proiettili è possibile sostituire la list-style: nonecon list-style-position: insideo la scorciatoia list-style: inside:

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

La mia soluzione preferita per rimuovere il rientro <ul> è un semplice CSS one-liner:

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

Questa soluzione non è solo leggera, ma presenta numerosi vantaggi:

• Allinea perfettamente a sinistra i punti elenco di <ul> al testo di paragrafo normale circostante (= rientro di <ul> rimosso).
• I blocchi di testo all'interno degli elementi <li> rimangono correttamente rientrati se si avvolgono in più righe.

Informazioni legacy:
per IE versioni 8 e precedenti è necessario utilizzare margin-left invece:

    ul { margin-left: 1.2em; }

Aggiungi questo al tuo CSS:

ul { list-style-position: inside; }

Ciò inserirà gli elementi li nello stesso trattino di altri paragrafi e testo.

Rif: http://www.w3schools.com/cssref/pr_list-style-position.asp

display:table-row; eliminerà anche il rientro ma rimuoverà i proiettili.

Rimuovere l'imbottitura:

padding-left: 0;

Puoi fornire un collegamento ? grazie posso dare un'occhiata molto probabilmente il tuo selettore css non è abbastanza forte o puoi provare

padding:0!important;

Ho lo stesso problema con un piè di pagina che sto cercando di dividere. Ho scoperto che questo ha funzionato per me provando alcuni dei suggerimenti di cui sopra combinati:

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

Questo sembra tenerlo a sinistra sotto il mio h1 e il proiettile punta all'interno del div piuttosto che all'esterno a sinistra.

Demo live: https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

Poiché la domanda originale non è chiara in merito ai suoi requisiti, ho cercato di risolvere questo problema all'interno delle linee guida stabilite da altre risposte. In particolare:

• Allinea i punti elenco con il testo del paragrafo esterno
• Allinea più righe all'interno della stessa voce di elenco

Volevo anche una soluzione che non dipendesse dal fatto che i browser concordassero su quanto riempimento usare. Ho aggiunto un elenco ordinato per completezza.

In questo modo, ho impostato il margine su 0 (ul style = "margin: -0px"). I proiettili si allineano al paragrafo senza sporgenza.