Ir ao conteúdo
  • Cadastre-se

HTML Lista Ordenada - Sobre Formatação


Posts recomendados

Boa tarde a todos! 

 

Estou iniciando em HTML e fazendo alguns exercícios aqui, desde já aviso que são simples pois como disse estou no início e nunca tive contato com esse assunto, então estudando listas ordenadas surgiu uma dúvida. Tenho que fazer algo assim exatamente como está abaixo:

 

1. TÍTULOS

                  a. Texto 1

                  b. Texto 2

                  c. Texto 3

 

O resultado do meu código fica exatamente como abaixo: 

 

1.TÍTULOS

a. Texto 1

b. Texto 2

c. Texto 3

 

A dúvida é sobre formatação, como fazer a palavra TÍTULO ficar no canto superior esquerdo e as opções mais no meio? Estou fazendo e as opções ficam embaixo do título. 😬

Segue meu código para análise abaixo.

 

 

<!DOCTYPE html>

<html>

<head>
	<title>Meu site</title>
	<meta charset="utf-8">
</head>

<body>

	<ol>
		<li>TÍTULOS</li>
	</ol>
			
	<ol type ="a" start="a">
		<li>Texto 1</li>
		<li>Texto 2</li>
		<li>Texto 3</li>
	</ol>
</body>

Desde já agradeço a atenção galera! 😅

 

 

 

Link para o post
Compartilhar em outros sites
  • Moderador

@MppS Basicamente você só colocou a estrutura.  Você deve usar o CSS para estilizar.

 

Adicione um padding-left ao elemento ol na qual você quer empurrar para frente.

 

ol.itens{
  padding-left: 120px;
}
<ol>
	<li>TÍTULOS</li>
</ol>
			
<ol class="itens" type ="a" start="a">
	<li>Texto 1</li>
	<li>Texto 2</li>
	<li>Texto 3</li>
</ol>

Veja funcionando: https://jsfiddle.net/dife/7y5xrcej/4/

  • Obrigado 1
Link para o post
Compartilhar em outros sites

@DiF Olá, tudo bem? 

 

Primeiramente obrigada pelo esclarecimento, deu para entender, ainda não cheguei na parte de CSS mas eu entendi o que explicou, obrigada. Mas me diz uma coisa, a única forma de formatar da forma como eu queria é somente com CSS? Em HTML não existe uma propriedade para isso? 

 

 

Link para o post
Compartilhar em outros sites
  • Moderador

@MppS

16 minutos atrás, MppS disse:

a única forma de formatar da forma como eu queria é somente com CSS? Em HTML não existe uma propriedade para isso? 

Sim é isso mesmo. A única forma de formatar algo no html é por meio de CSS.

 

HTML e CSS andando praticamente lado a lado. Não sei como é seu curso, ou se você está estudando por conta própria, mas esses dois devem ser estudados juntos.

 

Imagine a seguinte analogia:

O HTML é o esqueleto do corpo, CSS é a pele e aparência..  Sem nossa pele, seriamos apenas o esqueleto sem aparência.

Por isso ambos são juntos. 

 

Você pode usar o CSS de duas formas:  Incorporada, como é o exemplo que dei acima no outro post,  e inline, que é colocando com a tag style no próprio elemento.

 

Por recomendação, evite de usar a forma inline, pois o grau de precedência é maior. Ou seja, se tiver uma regra css incorporada para o elemento, colocando a regra diretamente no elemento, passa ela a ser considerada, ao invés da outra.

Não posso entrar em detalhes nisso, porque teria que explicar o valor de Especificidade dos elementos..

 Posso deixar um link de leitura se quiser: https://medium.com/emanuelg-blog/entendendo-a-precedência-de-estilo-em-css-especificidade-herança-e-efeito-cascata-a437c4929173

Link para o post
Compartilhar em outros sites

@DiF Muitíssimo obrigada pela explicação, dúvida resolvida, estou estudando por conta própria, fazendo um curso online de desenvolvimento web, o tópico de CSS é o próximo do curso. 

Obrigada pela recomendação e pelo link de leitura, vou ler sim. 

Ótima semana a ti! Valeu 🙂

  • Curtir 1
Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!