Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

micox

Numero da lista ordenada sumiu

Por , em Desenvolvimento frontend

Recommended Posts

micox    2

micox
Postado

É o seguinte:

Comé que eu faço pra aparecer denovo os números da minha lista ordenada?? A culpa é do display:inline. Se eu coloco ele, os números somem. Se eu tiro, os números voltam a aparecer.

 

Comé que eu faço?? Já tentei alterando margin e padding e não deu em nada.

Há alguma solução?

 

(infelizmente eu não tenho link online)

<style>.passo { width:50%; text-align:center; margin:auto; position:relative; font-size:14px;}.passo li { color:#BBBBBB; margin:20px; list-style-type: decimal; display:inline; }.passo .passo-sel { font-weight:bold; color:#638AD3;}</style><body><ol class='passo'><li class='passo-sel'>Carrinho</li><li>Dados da entrega</li><li>Pagamento</li></ol></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Use estas regras de estilo:

<style  type="text/css">
.passo { width:50%; text-align:center; margin:auto;font-size:14px; }
.passo li { color:#BBBBBB; margin:20px;	float:left;}
.passo .passo-sel { font-weight:bold; color:#638AD3;}
</style>

 

Vai recuperar a numeração da lista em navegadores standards (Mozillas por exemplo).

O Internet Explorer não renderiza marcador de lista quando declarado display:inline ou float para os itens.

 

Uma possível solução (para servir o IE) seria posicionar absolutamente cada uma dos itens da lista, contudo isto pode ser uma solução ruim. Vou ver se arranjo um tempinho para resolver.

Por enquanto está resolvido para navegadores complacentes. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ae, valeu mestre Maujor, essa solução do float aí eu já sabia, mas valeu a tentativa.A questão é que eu não pretendia usar o float:left (pois a div que os contém perde a altura se ela não for definida claramente - obs. Se você tiver uma solução pra isso...).Se você conseguir achar uma solução aí pra gente... estarei esperando. Eu vou tentando por aqui também.Caso contrário vou ter que usar realmente uma das soluções propostas acima.Valeus...PS.: Só lembrando que este projeto é pra um serviço gratuito que disponibilizarei e será muito útil no e-commerce (principalmente pros desenvolvedores CSS. heheh)

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Valeu mestre Maujor.

Eu tinha lido um pouco desse esquema do hasLayout, mas era em ingles e eu não entendi 100%.

 

Tentei fazer a ideia de colocar um elemento pai nos li como dito na sua matéria.

Não deu certo pro display:inline, mas deu certo pro float:left. Não fica muito bonito por causa do excesso de divs.

 

A solução da forma que eu queria, eu não encontrei, mas é a vida né? heheh

 

De qualquer forma, eu deixo abaixo pra caso alguém tenha o mesmo problema (editado: corrigi este código):

<style>.passo { width:50%; text-align:center; margin:auto; position:relative; font-size:14px;}.passo div { color:#BBBBBB; margin:20px; float:left; list-style-type: decimal; display:list-item;}.passo .passo-sel { font-weight:bold; color:#638AD3;}</style><body><ol class='passo'><div class='passo-sel'>Carrinho</div><div>Dados da entrega</div><div>Pagamento</div></ol>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito