Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou querendo deixar minha lista não ordenada como se fosse um quadrado, por exemplo
Item 1 | Item 5
Item 2 | Item 4
Alguém poderia me dizer como faço isso em CSS? Obrigado!
Ainda não cheguei ao resultado que eu desejava :/
Minha intenção é deixar o Facebook e o Twitter de um lado e o instagram no outro lado, exemplo:
Facebook | Instagram
Twitter | Youtube (Vou colocar depois)
Veja como está:
/applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/NSfFGd6.png?1&key=0fd55feb7027b2a85d3eea11d9fb5cb875656dd7c800e4ea720f4c04e56788fe" class="ipsImage" alt="NSfFGd6.png?1" />
manda o código pra eu ver
#rodapespace{
padding-left: 200px;
}
#rodapespace ul{
list-style-type:none;
padding-top:10px;
padding-bottom:10px;
}
#rodapespace ul li{
padding-top:5px;
display:inline-block;
}fiz um arquivo rapidinho para você poder visualizar:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
<style>
ul li{
display: inline-block;
padding: 10px;
font-family: calibri;
}
</style>
<body>
<ul>
<li>Facebook</li>
<li>Instagram </li>
<br>
<li>Twitter</li>
<li>Youtube</li>
</ul>
</body>
</html>
Faltava o <br> no ul! Porém agora estou com outro problema, não está com o espaçamento entre eles
ul {
list-style: none;
display: grid;
padding: 0;
width: 200px;
} border: 1px solid #ddd;
width: 100%;
text-align: center;
} grid-row: 1;
}
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
</ul>
Att.Como eu disse, o único problema que está acontecendo é o espaçamento superior da segunda linha que não está funcionando, veja:
/applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/bbnhn8l.png?1&key=6f6bc8c7c0135a74456ac52a12886033ae32c2befec70e501ac7f10e6e261096" class="ipsImage" alt="bbnhn8l.png?1" />
Seguindo o meu exemplo, é só adicionar um "margin" nos itens e pra não estourar a largura do "ul", defina o "li" com "width: auto;", ex:
li {
border: 1px solid #ddd;
width: auto;
text-align: center;
margin: 5px;
}
Para chegar ao resultado pretendido (OP), eu sugeri uma opção dentre outras possíveis e apenas como base, agora a personalização fica a seu cargo.
Att.>
1 hora atrás, RaphaelT13 disse:
Como eu disse, o único problema que está acontecendo é o espaçamento superior da segunda linha que não está funcionando, veja:
/applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/bbnhn8l.png?1&key=6f6bc8c7c0135a74456ac52a12886033ae32c2befec70e501ac7f10e6e261096" />
Utilize o margin, exemplo:
1 - margin: 20px;
2 - margin-bottom: 20px;
o que preferir.Mesmo assim não está funcionando
@edit
Consegui resolver, mas não do modo que eu tava imaginando, mas consegui o resultado! Obrigado a todos!
Olá, apenas Insira a linha " display: inline-block; " no seu css