I need the colored squares to be aligned vertically, I have no idea how to do that.
I’m using "div" to align them into columns, but they’re not straight.
Is there a way to fix this? Do I need to use another tag?
I’m just learning the basic of html and css in school. 🙂
I’ve tried width, margin, but I don’t find the right one.
Here’s my code:
HTML:
<div class="coluna_1">
<div class="legenda">
<span class="leghidrogenio"></span>
<span>Hidrogênio</span>
</div>
<div class="legenda">
<span class="legmetaistransicao"></span>
<span>Metais de Transição</span>
</div>
<div class="legenda">
<span class="legnaometaispoliatomicos"></span>
<span>Não Metais Poliatomicos</span>
</div>
<div class="legenda">
<span class="legdesconhecidos"></span>
<span>Propriedades QuÃmicas Desconhecidas</span>
</div>
</div>
<div>‎</div>
<div class="coluna_2">
<div class="legenda">
<span class="legmetaisalcalinos"></span>
<span>Metais Alcalinos</span>
</div>
<div class="legenda">
<span class="legmetaispostransicao"></span>
<span>Metais pós-transição</span>
</div>
<div class="legenda">
<span class="legnaometaisdiatomicos"></span>
<span>Não Metais Diatomicos</span>
</div>
<div class="legenda">
<span class="leglantanideos"></span>
<span>LantanÃdeos</span>
</div>
</div>
<div>‎</div>
<div class="coluna_3">
<div class="legenda">
<span class="legmetaisalcalinoterrosos"></span>
<span>Metais Alcalinoterrosos</span>
</div>
<div class="legenda">
<span class="legsemimetais"></span>
<span>Semimetais</span>
</div>
<div class="legenda">
<span class="leggasesnobres"></span>
<span>Gases Nobres</span>
</div>
<div class="legenda">
<span class="legactinideos"></span>
<span>ActinÃdeos</span>
</div>
</div>
CSS
.coluna_1 {
display: flex;
}
.coluna_2 {
display: flex;
}
.coluna_3 {
display: flex;
}
.leghidrogenio {
height:30px;
width:30px;
background:#9bc0f7;
display:flex;
border-radius: 10px;
}
div.leghidrogenio:active + th.hidrogenio {
scale: 150%;
}
th.hidrogenio:active + div.leghidrogenio {
scale: 150%;
}
.legmetaisalcalinos {
height:30px;
width:30px;
background:#fa4d56;
display:flex;
border-radius: 10px;
}
.legmetaisalcalinoterrosos {
height:30px;
width:30px;
background:#f7cb3d;
display:flex;
border-radius: 10px;
}
.legmetaistransicao {
height:30px;
width:30px;
background:#6fdc8c;
display:flex;
border-radius: 10px;
}
.legmetaispostransicao {
height:30px;
width:30px;
background:#8a3ffc;
display:flex;
border-radius: 10px;
}
.legsemimetais {
height:30px;
width:30px;
background:#fd7d7d;
display:flex;
border-radius: 10px;
}
.legnaometaispoliatomicos {
height:30px;
width:30px;
background:#48bf53;
display:flex;
border-radius: 10px;
}
.legnaometaisdiatomicos {
height:30px;
width:30px;
background:#ff964f;
display:flex;
border-radius: 10px;
}
.leggasesnobres {
height:30px;
width:30px;
background:#ff7eb6;
display:flex;
border-radius: 10px;
}
.legdesconhecidos {
height:30px;
width:30px;
background:#dddddd;
display:flex;
border-radius: 10px;
}
.leglantanideos {
height:30px;
width:30px;
background:#404be3;
display:flex;
border-radius: 10px;
}
.legactinideos {
height:30px;
width:30px;
background:#4589ff;
display:flex;
border-radius: 10px;
}
2
Answers
There are multiple ways to achieve this but the most powerful option will be to use flexbox. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
Just add .lengenda { display: flex}