Ir para conteúdo
Kaio Kdesigner

Como faço UL LI responsivo?

Recommended Posts

Pergunta meio tosca, eu sei, mas é que eu já procurei na internet e não encontrei...

Quero fazer uma ul li resposiva.

 

Pc: imgem imagem

mobile: imagem
              imagem

Compartilhar este post


Link para o post
Compartilhar em outros sites

Simples use float / inline-block / flex

em cada item <li>.

Quando não houver espaço para caber o elemento ao lado ele quebra para baixo.

Defina uma largura por padrão se for necessário, e se também for necessário você pode está alterando com @media essas larguras conforme a resolução.

 

Exemplo:

<ul class="list-none">
    <li class="line-block box-x-250 bg-red">Item</li>
    <li class="line-block box-x-250 bg-green">Item</li>
    <li class="line-block box-x-250 bg-blue">Item</li>
</ul>

Usos:

list-none

line-block

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por dgonnasc
      Pessoal preciso de ajuda! Sou iniciante na programação e preciso criar uma área assim:
       
       
      Alguém pode me dar uma ideia? 
    • Por Dauton
      Tipo o resultado de pesquisa do Google, onde o resultado é dividido em várias páginas, 1 2 3 4 5 6...
    • Por Sherlock02
      Boa tarde, pessoal.
      Eu já trabalhei como web designer, mas estou parada, então tenho bastante conhecimento de html e css.
      Eu gostaria de fazer um catálogo de filmes, muito simples, com capas dos filmes que assisti, incluindo alguns dados, como nome, nota, etc. Essas capas poderão ficar dentro de uma pasta junto com o arquivo em html para meu acesso pessoal. Arquivo offline.
       
      Mas eu gostaria de saber se existe alguma forma prática de enviar as imagens para esse site, já que estamos falando de +2000 filmes assistidos.
      Algo do tipo: clicar na imagem e arrastar, já se insere no código?
      Penso que o Dreamweaver me daria um trabalhão...
    • Por Fernando Matiello
      Baixei um template incrível para restaurante, porém não consigo alterar a cor do template inteiro. Não achei onde faço isso 
      Preciso alterar a cor do template no código, mas não identifiquei onde faço. Alguém me ajuda? aqui está o link e o download
       
      o site online é http://themes.potenzaglobalsolutions.com/html/the-zayka/index-2.html
       
      o arquivo dele para baixar é www.belmaris.com.br/site.rar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.