Pergunta

Em uma folha de estilo global usado em todas as nossas páginas fica a seguinte linha:

ul { margin: 0; }
li { list-style-type: none; padding-bottom: 3px; }

Portanto, quaisquer da UL dentro de minhas páginas render com nenhum disco ao lado de Li.

No entanto, em casos especiais, eu preciso apresentar o disco ao lado de uma li.

Eu tenho uma div com a classe "do blog-post" e que embora o seguinte faria o truque para mim.

.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }

No entanto, este não está fazendo o truque.

Assim, com o seguinte trecho de HTML

<ul>
  <li>Testing</li>
</ul>
<ol>
  <li>Testing</li>
</ol>

Os resultados com:

Testing
1. Testing

Ainda nenhum disco no li está aninhado nos da UL. Pensamentos sobre como eu posso levá-los lá? Meu CSS-fu é fraco ....

Foi útil?

Solução

! Important não é necessário porque os estilos específicos de classe substituir os estilos globais já. O problema é porque no estilo global você definir a margem para zero. O tipo de estilo está sendo processado corretamente, mas você simplesmente não pode vê-lo. Isso deve funcionar para você:

.blog_body ul 
{
    list-style-type: disc; 
    margin: 1em;
}

Outras dicas

Alterar esta:

.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }

a esta:

.blog_body ul li { list-style-type: disc; }
.blog_body ol li { list-style-type: decimal; }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top