HTML alinhar lista html basica

Evertonvrau · 25 de março de 2018

Não estou conseguindo deixar JANEIRO alinhado como na imagem. Alguém pode ajudar? código que fiz:

<html>
<head>
<title>Iniciando a lista com um número diferente</title>
</head>
<body>
<p>Os Últimos Seis Meses do Ano (e o Início do Próximo Ano):</p>
<ol type="I" start="7">
<li>Julho.</li>
<li>Agosto.</li>
<li>Setembro</li>
<li>Outubro</li>
<li>Novembro</li>
<li>Dezembro</li>
<ul type="disc">
<li>Janeiro</li>
</ul>

</ol>

Grato

HwapX · 25 de março de 2018

Deixe janeiro como os outros meses sem o UL e coloque o atributo type diretamente nele.

...
<li>Dezembro</li>
<li type="disc">Janeiro</li>
<!--
Uma abordagem mais correta seria utilizar CSS visto
  que o atributo type foi descontinuado
<li style="list-style-type: disc;">Janeiro</li>
-->
</ol>

groutmoustache · 26 de março de 2018

Dúvidas como essas, às vezes, podemos resolver usando o modo inspecionador do navegador.

Assim, pressionando ctrl + i, podemos acessar a ferramenta e visualizar o seguinte:

Dado isso, podemos perceber que a seta vermelha está indicando que a lista não ordenada tem um padding padrão (caixinha verde).

Por isso, se tu quiser alinhar o conteúdo da forma mencionada, podes fazer uma regra CSS que diminua o valor desse padding.

Segue um código exemplo, pra tu brincar e tentar entender (vá diminuindo o padding e veja a diferença):

https://codepen.io/anon/pen/geXwMe