Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde a todos...
Estou com uma dúvida de como fazer o seguinte:
Tenho vários UL... dentro de uma DIV.
Imagine que quando tenho espaço para 4 ULs na mesma linha e quando vou colocar a 5a ela vá para a linha de baixo... Até aqui normal.
O que acontece é que a DIV que engloba as ULs têm uma cor específica e ela não cresce junto com as ULs deixando apenas um pedaço com a cor e o resto em branco.
Existe alguma propriedade que possa me ajudar?
Obrigado.
ZUCOLLI
Obrigado a todos, com as dicas ficou bem fácil.
Coloquei o clear: both e os ULs ficarão no lugar certo.
Coloquei display: inline-block e o background acompanhou o tamanho total das ULs.
Só que agora estou com outra dúvida, como faço para a linha ficar da altura da maior UL? ou seja tenho vários LI dentro de cada UL e as vezes mostro todos as vezes não, depende se tem informação no banco de dados... aí a UL que fica em baixo desloca... saca?
Valeu mesmo.
ZUCOLLI
Ai você vai modificar o css, veja se funciona:
ul { display: inline-block;
*display: inline;
...
width: largurapx;Não funcionou!
Eu não defini a altura da UL por isso cada uma fica de um tamanho e a idéia é deixar a linha da altura da maior.
ZUCOLLI
O código que eu passei é pra isso, pra não "encavalar".
Você retirou o float?
Poste um link, vai fica mais fácil ;)
Eu me perdi um pouco nas dúvidas. Um exemplo de como você está fazendo fica melhor.
Ah, o que pode ajudar também é aplicar um "clear:left" (ou right, dependendo do seu float nas UL) na primeira UL que cai pra baixo. Ex.: se você possui muitas UL, e a cada 4 a próxima cai, você pode alcançá-la com ":nth-child(4n + 1)" de seletor. :thumbsup:
Não tenho como saber após quantas a proxima vai cair...
A DIV é alterada conforme o usuário aumenta/diminui a janela.
Então as vezes vai ter 3 ou 4 ou 5...
ZUCOLLI
Se a largura das UL for fixa, aplique a propriedade com a largura de media queries então. Você alcança a média das resoluções necessárias para fazer a quebra que citei.
A largura é fixa 160px
Só que não tenho este conhecimento ainda.
Vou estudar um pouco e volto com a solução.
Obrigado.
ZUCOLLI
Tenta algo do tipo:
@media only screen and (min-width: 1024px) {
.suaUL:nth-child(4n + 1) {
clear: left;
}
}clear:left;
}
}@media only screen and (min-width: 704px) and (max-width: 863px) {
.suaUL:nth-child(2n + 1) {
clear:left;
}
}André,
É isso que eu quero, porém como te disse não sei quantos terei na linha...
Apliquei isto e com 10 na linha ficou OK, porém quando o usuário dimensiona a área do browser e a linha passa a ter 9 tudo vai por água a baixo.
@media only screen and (min-width: 1024px) {
#produtos ul:nth-child(10n+1) {
clear: left;
}
}
@ZUCOLLI seus ul's devem estar com float, certo? Acho que esse link ajuda ;)