Livrar-se dos pontos de bala de <ul>


163

Eu tenho a seguinte lista:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

Eu quero me livrar das balas, então tentei:

 ul#otis {
 list-style-type: none;
 }

Isso não funcionou. Qual é a maneira correta de remover os marcadores da lista exibida?


1
Seu HTML / CSS atual funciona bem para mim no FF (JSFiddle). Qual navegador você está usando? Veja se list-style: nonefunciona.
Bojangles

1
Eu tentei isso em todos os navegadores e Mac e Windows OS. Eu estou usando HTML5 doctype ...
Sam Khan

Respostas:


197

Supondo que isso não funcionou, convém combinar o idseletor baseado em com o lipara aplicar o css aos lielementos:

#otis li {
    list-style-type: none;
}

Referência:


Qual é a diferença de fazer ul#otise #otis?
PeeHaa

Na verdade, não há, falhei completamente ao ver o idseletor que você usou. OPA, desculpe!
David diz que restabelece Monica

1
onde nesse link posso descobrir que ele precisa ser definido no li?
PeeHaa

As duas primeiras frases: "A list-style-typepropriedade CSS especifica a aparência de um elemento do item da lista. Como é o único que assume o padrão display:list-item" (embora permita que possa ser aplicado a qualquer elemento com uma displaypropriedade). Embora eles o definam, por exemplo, sob o olelemento Pessoalmente, sempre defino a definição para a lista ( ul/ ol) e os lielementos.
David diz que restabelece Monica

27

Eu mesmo tive o mesmo problema irritante extremo, pois o script não notou minha folha de estilo. Então eu escrevi:

<ul style="list-style-type: none;">

Isso não deu certo. Então, além disso , escrevi:

<li style="list-style-type: none;">

Voila! funcionou!


20

Para remover pontos de marcador de listas não ordenadas, você pode usar:

list-style: none;

Você também pode usar:

list-style-type: none;

Ou funciona, mas a primeira é uma maneira mais curta de obter o mesmo resultado.


18

O código a seguir

#menu li{
  list-style-type: none;
}
<ul id="menu">
        <li>Root node 1</li>
        <li>Root node 2</li>
    </ul>

produzirá esta saída:

saída é


15

Experimente fazer isso, testado no Chrome / Safari

ul {
 list-style: none;
}

4

Colocar

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

imediatamente antes da lista para testá-lo. Ou

<ul style="list-style-type: none;">

4

Para remover o marcador de ULvocê pode simplesmente usar list-style: none;ou list-style-type: none;Se ainda não funcionar, acho que há um problema de CSS prioritário . Pode ser globalmente UL já definido. Então, a melhor maneira de adicionar uma classe / ID a essa UL específica e adicionar seu CSS lá. Espero que funcione.


4

Isso funcionou perfeitamente em HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}

3

Deve haver algo mais.

Porque:

   ul#otis {
     list-style-type: none;
   }

deve funcionar.

Talvez haja alguma regra CSS que a substitua.

Use seu inspetor DOM para descobrir.


3

Eu tive o mesmo problema, e a maneira como acabei consertando foi assim:

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

Talvez seja um pouco extremo, mas quando fiz isso, funcionou para mim.


Espero que isso tenha ajudado


3

para folha de estilo em linha, tente este código

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>

1

seu código:

ul#otis {
    list-style-type: none;
}

minha sugestão:

#otis {
    list-style-type: none;

}

em css, você só precisa usar o #idnot element#id. dicas mais úteis são fornecidas aqui: w3schools


0

Eu tive um problema idêntico.

A solução foi que o marcador foi adicionado por meio de uma imagem de plano de fundo , NÃO por meio do estilo de lista. Um rápido "histórico: nenhum" e Bob é seu tio!

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.