Como remover o recuo de um item de lista não ordenado?

Eu quero remover todo o recuo de ul. Tentei configurar margin, padding, text-indenta 0, mas sem sucesso. Parece que definir text-indentum número negativo funciona - mas essa é realmente a única maneira de remover o recuo?

Defina o estilo da lista e o preenchimento esquerdo para nada.

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>

Para manter os marcadores, você pode substituir o list-style: nonecom list-style-position: insideou a abreviação 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>

Minha solução preferida para remover o recorte <ul> é uma linha simples de CSS:

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>

Esta solução não é apenas leve, mas tem várias vantagens:

• Alinha bem os marcadores de <ul> com o texto de parágrafo normal circundante (= recuo de <ul> removido).
• Os blocos de texto nos elementos <li> permanecem corretamente recuados se forem agrupados em várias linhas.

Informações herdadas: nas
versões 8 e abaixo do IE, você deve usar a margem esquerda:

    ul { margin-left: 1.2em; }

Adicione isso ao seu CSS:

ul { list-style-position: inside; }

Isso colocará os elementos li no mesmo recuo que outros parágrafos e texto.

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

display:table-row; também se livrará do recuo, mas removerá as balas.

Retire o estofamento:

padding-left: 0;

Você pode fornecer um link ? obrigado Eu posso dar uma olhada Muito provavelmente o seu seletor de css não é forte o suficiente ou você pode tentar

padding:0!important;

Eu tenho o mesmo problema com um rodapé que estou tentando dividir. Descobri que isso funcionou para mim, tentando algumas das sugestões acima combinadas:

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

Isso parece mantê-lo à esquerda sob meu h1 e os pontos de bala dentro da div e não fora à esquerda.

Demonstração ao vivo: 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: "●";
}

Como a pergunta original não é clara sobre seus requisitos, tentei resolver esse problema dentro das diretrizes definidas por outras respostas. Em particular:

• Alinhar marcadores de lista com texto de parágrafo externo
• Alinhar várias linhas no mesmo item da lista

Eu também queria uma solução que não dependesse de navegadores concordando com a quantidade de preenchimento a ser usada. Eu adicionei uma lista ordenada para completar.

Fazendo isso em linha, defino a margem como 0 (ul style = "margin: -0px"). As marcas estão alinhadas com o parágrafo sem saliência.