Jump to content
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

Share this post


Link to post
Share on other 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

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By dgonnasc
      Pessoal preciso de ajuda! Sou iniciante na programação e preciso criar uma área assim:
       
       
      Alguém pode me dar uma ideia? 
    • By Dauton
      Tipo o resultado de pesquisa do Google, onde o resultado é dividido em várias páginas, 1 2 3 4 5 6...
    • By 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...
    • By 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
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.