Basicamente o que eu fiz foi separar a lista em duas colunas utilizando as tags span para segmentar 2 grupos de li, assim pude utilizar o display: flex; na ul e o justify-content: space-evenly; para dispor as duas colunas centralizadas e espaçadas igualmente.
A forma mais prática de se dividir uma lista em duas colunas é utilizando o columns: 2; na ul, porém não utilizei justamente porque ao utilizá-lo as colunas se alinham à esquerda.
Não consigo fazer a divisão das colunas da forma que eu fiz sem utilizar os span, mas preciso, pois o uso dos span gera um problema de acessibilidade.
Olá @joaovictor,para obter o layout desejado, você pode usar flexbox para criar duas colunas de itens dentro da ul.
Primeiro, remova os span e, em vez disso, use os próprios li para criar colunas. Aqui está uma abordagem para fazer isso:
Adicione uma classe CSS para diferenciar os itens da primeira coluna e da segunda coluna.
Use flexbox para dividir a lista em duas colunas. Aqui está um exemplo de como fazer isso:
Essa abordagem mantém a estrutura acessível, pois usa apenas uma ul com li e distribui os itens em duas colunas usando flexbox. Eu uso muito isso nos meus desenvolvimentos,vi seu questionamento, deixo aqui minha contribuição.
Boa noite, brother, obrigado por responder. Infelizmente não era isso que eu queria. Queria que estivessem dispostas ao centro, mas com esse código ela fica disposta à esquerda.
Do como está formulado seu esboço acima,@joaovictor, não pude compreender seu pedido, mas agora aqui está o código usando flex-box e colunas centralizadas.
Note bem o Sr. que no questionamento do seu tópico, você quer saber do como dividir as listas em duas colunas, mas quanto ao posicionamento, não se referiu ao centro, no flex-box. Veja essa segunda versão, centralizei as listas como pediu.
Então,@joaovictor, lendo o segundo esboço do seu tópico,a solução pode ser reescrevendo o código, fazendo das duas colunas, uma só e centralizada ao centro, concorda,ou continua eu interpretando confuso,seu raciocínio?
Agora é tipo da versão baseada na foto green que você forneceu, escrevi o modelo,@joaovictor,em um só corpo HTML abaixo está o código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista em Duas Colunas</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #5db674;
}
.container {
background-color: #88d08a;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
text-align: center;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: inside "\2714\00A0\00A0";
justify-content: center;
padding: 0;
}
li {
flex: 1 1 50%;
box-sizing: border-box;
padding: 5px;
}
@media (min-width: 435px) {
ul {
flex-wrap: nowrap;
justify-content: space-evenly;
}
.col1, .col2 {
flex: 1;
}
.col1 {
order: 1;
}
.col2 {
order: 2;
}
}
.link {
color: #007bff;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2>Quer aprender mais?</h2>
<p>Outro assunto curioso em relação ao Android é que cada versão sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir da versão 1.5 até a 9.0.</p>
<ul>
<li class="col1">1.5 - <abbr title="Bolo de Copo">Cupcake</abbr></li>
<li class="col1">1.6 - <abbr title="Rosquinha">Donut</abbr></li>
<li class="col1">2.1 - <abbr title="Bomba">Eclair</abbr></li>
<li class="col1">2.2 - <abbr title="Iogurte Congelado">Froyo</abbr></li>
<li class="col1">2.3 - <abbr title="Biscoito de Gengibre">Gingerbread</abbr></li>
<li class="col1">3.0 - <abbr title="Favo de Mel">Honeycomb</abbr></li>
<li class="col1">4.0 - <abbr title="Sanduíche de Sorvete">Ice Cream Sandwich</abbr></li>
<li class="col2">4.1 - <abbr title="Jujuba">Jelly Bean</abbr></li>
<li class="col2">4.4 - <abbr title="KitKat">KitKat</abbr></li>
<li class="col2">5.0 - <abbr title="Pirulito">Lolipop</abbr></li>
<li class="col2">6.0 - <abbr title="Marshmallow">Marshmallow</abbr></li>
<li class="col2">7.0 - <abbr title="Torronne">Nougat</abbr></li>
<li class="col2">8.0 - <abbr title="Oreo">Oreo</abbr></li>
<li class="col2">9.0 - <abbr title="Torta">Pie</abbr></li>
</ul>
<p>Infelizmente, o Android Q não existiu, pois o Google resolveu pôr fim a essa divertida prática e começou a usar numerações, o que deu origem ao Android 10.</p>
<p>Acesse aqui o site <a href="https://www.android.com/history/" class="link">Android History</a> para conhecer a sequência das versões "adocicadas" e o que cada uma trouxe para o sistema Android.</p>
</div>
</body>
</html>
Imagino que o que você quer fazer resolver, com uso de CSS puro, como acima, pode ser feito. Tentei entender e interpretar o raciocínio do seu tópico até onde deu para entender dele,seu pedido,se caso, não resolve ainda sua pendência, poderia ser mais específico?
Peço desculpas se a minha pergunta não foi clara ou se faltou algum esclarecimento da minha parte. Basicamente o que eu fiz foi separar a lista em duas colunas utilizando as tags span para segmentar 2 grupos de li, assim pude utilizar o display: flex; na ul e o justify-content: space-evenly; para dispor as duas colunas centralizadas e espaçadas igualmente.
A forma mais prática de se dividir uma lista em duas colunas é utilizando o columns: 2; na ul, porém não utilizei justamente porque ao utilizá-lo as colunas se alinham à esquerda.
Não consigo fazer a divisão das colunas da forma que eu fiz sem utilizar os span.
Tudo bem,@joaovictor,eu resolvi o problema da organização das colunas, mas sem tags span, dê uma olhada:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista em Duas Colunas</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #5db674;
}
.container {
background-color: #88d08a;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
text-align: center;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: inside "\2714\00A0\00A0";
justify-content: space-evenly;
padding: 0;
}
li {
flex: 1 1 45%;
box-sizing: border-box;
padding: 5px;
text-align: left;
}
.col1 {
order: 1;
}
.col2 {
order: 2;
}
@media (min-width: 435px) {
ul {
flex-wrap: nowrap;
}
}
.link {
color: #007bff;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2>Quer aprender mais?</h2>
<p>Outro assunto curioso em relação ao Android é que cada versão sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir da versão 1.5 até a 9.0.</p>
<ul>
<li class="col1">1.5 - <abbr title="Bolo de Copo">Cupcake</abbr></li>
<li class="col1">1.6 - <abbr title="Rosquinha">Donut</abbr></li>
<li class="col1">2.1 - <abbr title="Bomba">Eclair</abbr></li>
<li class="col1">2.2 - <abbr title="Iogurte Congelado">Froyo</abbr></li>
<li class="col1">2.3 - <abbr title="Biscoito de Gengibre">Gingerbread</abbr></li>
<li class="col1">3.0 - <abbr title="Favo de Mel">Honeycomb</abbr></li>
<li class="col1">4.0 - <abbr title="Sanduíche de Sorvete">Ice Cream Sandwich</abbr></li>
<li class="col2">4.1 - <abbr title="Jujuba">Jelly Bean</abbr></li>
<li class="col2">4.4 - <abbr title="KitKat">KitKat</abbr></li>
<li class="col2">5.0 - <abbr title="Pirulito">Lolipop</abbr></li>
<li class="col2">6.0 - <abbr title="Marshmallow">Marshmallow</abbr></li>
<li class="col2">7.0 - <abbr title="Torronne">Nougat</abbr></li>
<li class="col2">8.0 - <abbr title="Oreo">Oreo</abbr></li>
<li class="col2">9.0 - <abbr title="Torta">Pie</abbr></li>
</ul>
<p>Infelizmente, o Android Q não existiu, pois o Google resolveu pôr fim a essa divertida prática e começou a usar numerações, o que deu origem ao Android 10.</p>
<p>Acesse aqui o site <a href="https://www.android.com/history/" class="link">Android History</a> para conhecer a sequência das versões "adocicadas" e o que cada uma trouxe para o sistema Android.</p>
</div>
</body>
</html>
Você necessariamente, precisa desse seu projeto utilizando tags span na ul? Entendi que você não tenha achado uma solução para essa situação,eu também não. Agora entendi sua questão.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista em Duas Colunas</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #5db674;
}
.container {
background-color: #88d08a;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
text-align: center;
}
ul {
display: flex;
justify-content: space-evenly;
padding: 0;
list-style: none;
}
.col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
li {
box-sizing: border-box;
padding: 5px;
list-style: inside "\2714\00A0\00A0";
}
@media (min-width: 435px) {
ul {
justify-content: center;
}
}
.link {
color: #007bff;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2>Quer aprender mais?</h2>
<p>Outro assunto curioso em relação ao Android é que cada versão sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir da versão 1.5 até a 9.0.</p>
<ul>
<span class="col">
<li>1.5 - <abbr title="Bolo de Copo">Cupcake</abbr></li>
<li>1.6 - <abbr title="Rosquinha">Donut</abbr></li>
<li>2.1 - <abbr title="Bomba">Eclair</abbr></li>
<li>2.2 - <abbr title="Iogurte Congelado">Froyo</abbr></li>
<li>2.3 - <abbr title="Biscoito de Gengibre">Gingerbread</abbr></li>
<li>3.0 - <abbr title="Favo de Mel">Honeycomb</abbr></li>
<li>4.0 - <abbr title="Sanduíche de Sorvete">Ice Cream Sandwich</abbr></li>
</span>
<span class="col">
<li>4.1 - <abbr title="Jujuba">Jelly Bean</abbr></li>
<li>4.4 - <abbr title="KitKat">KitKat</abbr></li>
<li>5.0 - <abbr title="Pirulito">Lolipop</abbr></li>
<li>6.0 - <abbr title="Marshmallow">Marshmallow</abbr></li>
<li>7.0 - <abbr title="Torronne">Nougat</abbr></li>
<li>8.0 - <abbr title="Oreo">Oreo</abbr></li>
<li>9.0 - <abbr title="Torta">Pie</abbr></li>
</span>
</ul>
<p>Infelizmente, o Android Q não existiu, pois o Google resolveu pôr fim a essa divertida prática e começou a usar numerações, o que deu origem ao Android 10.</p>
<p>Acesse aqui o site <a href="https://www.android.com/history/" class="link">Android History</a> para conhecer a sequência das versões "adocicadas" e o que cada uma trouxe para o sistema Android.</p>
</div>
</body>
</html>
Desculpa, acho que houve quebras nas outras versões de código que lhe enviei, agora, talvez essa versão aqui esteja melhor,com as colunas centralizadas na div dentro do body,@joaovictor.
Se não resolver sua situação pendente no código como proposta abordada por você @joaovictor , espero ter contribuído e ajudado para seu objetivo=arrumar o código do seu projeto original,seu objetivo. Ou no meu caso, pelo menos ter chegado perto do mesmo.
@AquaDev_Shasta, foi justamente o que eu fiz, se olhar o meu código vai ver que eu utilizei 2 spans para fazer isso, porém eu quero justamente retirar esses 2 spans e fazer sem eles. esse é o problema todo. quero o mesmo layout que eu tive com os spans, só que sem os spans.
Gratidão então,se você der uma olhada acima, tem versão sem tags span, tudo bem, com alguma quebra no código, mas juntando todas essas intenções, acho que você conseguirá organizar tudo do modo certo no seu projeto, estou no trabalho, ocupado aqui com umas coisas, mais tarde retorno;se você conseguir arrumar tudo,me avise, se quiser, claro.
Esse aí é aquele projetinho do curso de html e css do Curso em Vídeo?
Se for, eu tbm fiz ele e o meu também está alinhado à esquerda. Tentei centralizar com os conhecimentos que aprendi até esse módulo do projeto e não consegui.
Não sei em que parte do curso você já está, mas pelo menos até essa parte do projeto ele não ensinou isso ainda e, acredito que será lecionado nos módulos seguintes de CSS.
Eu já fiz o curso inteiro (o modulo 5 tá lançando agora) e já fiz vários outros layouts depois do curso, só estou melhorando o que fiz naquela época e está perfeito, falta apenas centralizar a lista com o efeito do space-evenly, porém só fiz isso dar certo pondo os spans, porém é uma prática que atrapalha a acessibilidade e só falta esse quesito pra o site tirar 100% no lighthouse.
No Stackoverflow,deve ter alguém com uma ajuda a+ lá. No CodePen, tem muito Dev expert em CSS, lá. No css tem desses desafios, essa sua proposta de código nesse projeto é mais um sobre. Buscando por “only css” no CodePen + o tema do tópico, você @joaovictor , poderá achar a solução, digite tudo em inglês,o retorno da busca é melhor.
Sem uso de tags span,a possibilidade que conheço é a centralização de divs tipo esse exemplo aqui:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista em Duas Colunas</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #5db674;
}
.container {
background-color: #88d08a;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
text-align: center;
}
ul {
display: flex;
justify-content: center;
padding: 0;
list-style: none;
}
.col {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
}
li {
box-sizing: border-box;
padding: 5px;
list-style: inside "\2714\00A0\00A0";
}
.link {
color: #007bff;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2>Quer aprender mais?</h2>
<p>Outro assunto curioso em relação ao Android é que cada versão sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir da versão 1.5 até a 9.0.</p>
<ul>
<div class="col">
<li>1.5 - <abbr title="Bolo de Copo">Cupcake</abbr></li>
<li>1.6 - <abbr title="Rosquinha">Donut</abbr></li>
<li>2.1 - <abbr title="Bomba">Eclair</abbr></li>
<li>2.2 - <abbr title="Iogurte Congelado">Froyo</abbr></li>
<li>2.3 - <abbr title="Biscoito de Gengibre">Gingerbread</abbr></li>
<li>3.0 - <abbr title="Favo de Mel">Honeycomb</abbr></li>
<li>4.0 - <abbr title="Sanduíche de Sorvete">Ice Cream Sandwich</abbr></li>
</div>
<div class="col">
<li>4.1 - <abbr title="Jujuba">Jelly Bean</abbr></li>
<li>4.4 - <abbr title="KitKat">KitKat</abbr></li>
<li>5.0 - <abbr title="Pirulito">Lollipop</abbr></li>
<li>6.0 - <abbr title="Marshmallow">Marshmallow</abbr></li>
<li>7.0 - <abbr title="Torron">Nougat</abbr></li>
<li>8.0 - <abbr title="Oreo">Oreo</abbr></li>
<li>9.0 - <abbr title="Torta">Pie</abbr></li>
</div>
</ul>
<p>Infelizmente, o Android Q não existiu, pois o Google resolveu pôr fim a essa divertida prática e começou a usar numerações, o que deu origem ao Android 10.</p>
<p>Acesse aqui o site <a href="https://www.android.com/history/" class="link">Android History</a> para conhecer a sequência das versões "adocicadas" e o que cada uma trouxe para o sistema Android.</p>
</div>
</body>
</html>
Funcionar, funciona,aprendi com as pessoas assim, não sei se possa servir como utilidade de código no seu projeto @joaovictor
Quando você diz problema de acessibilidade,eu não entendi do onde gera esse problema,e do porquê,se pudesse o Sr. digamos assim, expor mais técnico o problema de acessibilidade, isso me daria dados para buscas mais acertivas na Web. AFF,kk, é que desafios me facina, estudo css todo dia em modo game no app Mimo, é como o jogo do Duolingo,eu gosto desse tipo de conduta diariamente. Minhas pirações favoritas.