Preciso de uma lista não ordenada sem balas

2510

Eu criei uma lista não ordenada. Sinto que as balas na lista não ordenada são incômodas, então quero removê-las.

É possível ter uma lista sem marcadores?

praveenjayapal
fonte

Respostas:

3692

Você pode remover marcadores configurando list-style-typepara noneno CSS para o elemento pai (normalmente a <ul>), por exemplo:

ul {
  list-style-type: none;
}

Você também pode querer adicionar padding: 0emargin: 0 isso se desejar remover o recuo também.

Consulte o Tutorial de lista para obter uma grande explicação das técnicas de formatação de lista.

Paul Dixon
fonte
@tovmeod Parece funcionar bem no meu IE9 (no Win7). (é uma página complexa, não um POC simples, talvez algo mais mudou o comportamento)
David Balažic
1
Se você é como eu e também está procurando como remover o recuo, veja isto - stackoverflow.com/a/13939142/846727 #
Kunal
6
Oh, quantas vezes eu voltar aqui para o copiar / colar :)
Jonathan.Brink
Bom toque no preenchimento e nas margens
Evgenii Klepilin 27/01
588

Se você estiver usando o Bootstrap, ele possui uma classe "sem estilo":

Remova o estilo de lista padrão e o preenchimento esquerdo nos itens da lista (somente filhos imediatos).

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

Scott Stafford
fonte
2
Se listássemos classes para cada estrutura CSS, teríamos uma bagunça no StackOverflow. Uma rápida pesquisa no Google revela que o Bootstrap foi usado apenas por 2% dos sites no auge, e certamente está caindo com a introdução de soluções mais sensíveis, como flexbox e css grid.
PJ Brunet
4
Na verdade, essa resposta é exatamente o que eu estava procurando. E o Bootstrap é usado por 3,6% de toda a Internet, por isso não está caindo. trends.builtwith.com/docinfo/Twitter-Bootstrap Uma rápida pesquisa no Google revela que o Bootstrap é consistentemente colocado na categoria "estruturas CSS mais populares".
Bobort 10/05
209

Você precisa usar list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>
karim79
fonte
4
Esteja ciente de que o CSS embutido substitui o CSS nos arquivos. Dependendo das práticas de aplicação / desenvolvimento, pode ser realmente irritante.
Mark Baijens
39

Pequeno refinamento das respostas anteriores: Para tornar as linhas mais longas mais legíveis se elas se espalharem para linhas de tela adicionais:

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

li {padding-left: 2em; text-indent: -2em;}
charliehoward
fonte
Funciona, mas apenas para o IE8
Underverse
Não é necessário colocar list-style-type: none;o ule o li. Você pode apenas fazer um.
mfluehr
14

Se você não conseguir fazê-lo funcionar no <ul>nível, pode ser necessário colocá-lo list-style-type: none;no <li>nível:

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

Você pode criar uma classe CSS para evitar esta repetição:

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

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

Quando necessário, use !important:

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

Usei o estilo de lista nos ul e li para remover as balas. Eu queria substituir as balas por um caractere personalizado, neste caso, um 'traço'. Isso fornece um efeito bem recuado que funciona quando o texto é finalizado.

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>

Chris Halcrow
fonte
5

Para remover completamente o ulestilo padrão:

    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;
Masih Jahangiri
fonte
2

Se você deseja fazer isso apenas com HTML puro , esta solução funcionará em todos os principais navegadores:

Listas de descrição

Simplesmente usando o seguinte 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>

O que produzirá uma lista semelhante à seguinte:

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

Exemplo aqui: https://jsfiddle.net/zumcmvma/2/

Referência aqui: https://www.w3schools.com/tags/tag_dl.asp

ShaneB
fonte
1
Se você usar esse método, use a maneira semanticamente adequada de inserir um termo a ser definido <dt>e a definição desse termo em <dd>.
Bobort
2

Isso ordena uma lista verticalmente sem marcadores. Em apenas uma linha!

li {
    display: block;
}
mate
fonte
Nota técnica: isso funciona porque substitui o displayvalor padrão de <li>, que é display: list-item;.
mfluehr 19/09/19
0

se você estiver desenvolvendo um tema existente, é possível que o tema tenha um estilo de lista personalizado.

portanto, se você não pode alterar o estilo da lista usando list-style: none;tags ul ou li, verifique primeiro com!important porque talvez alguma outra linha de estilo esteja sobrescrevendo o seu estilo; se o importante foi corrigido, você deve encontrar um seletor mais específico e limpar o! important .

se não for o caso, verifique li:beforeo conteúdo. então faça:

li:before { dispaly: none; }
Ali_Hr
fonte
-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>
Homem Oracular
fonte
-1

Eu tentei e observei:

header ul {
   margin: 0;
   padding: 0;
}
Dadhich Sourav
fonte
1
Na verdade, isso não remove as balas. Eles são simplesmente empurrados para fora da tela.
mfluehr
-8

Caso você queira simplificar as coisas sem recorrer ao CSS, basta colocar um &nbsp;nas minhas linhas de código. Ou seja <table></table>,.

Sim, deixa alguns espaços, mas isso não é uma coisa ruim.

Phil
fonte
11
-1 Simples? Sem CSS? É por isso que muitos sites estão no estado chocante que estão. CSS adiciona simplicidade. As tabelas não são o caminho a seguir.
Webnoob 15/03