Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

Criar esse layout com LI

Recommended Posts

Pessoal, qual a melhor forma de montar o HTML/CSS para ficar como essa imagem?

criar-li.jpg

 

Pensei em usar DIV e  LI.

 

<DIV>

<ul>

<li>icone</li><li>Nome</li>

<li>32 anos - Feminino. - Insc. em: 15/05/17 - São Bernardo do Campo/SP</li>

</ul>

</DIV>

 

Seria um bom caminho? Alguém poderia me ajudar a criar o CSS para posicionar as LI?

 

Valew!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pode fazer da seguinte forma:

 

HTML

<ul class="avaliacao">
  <li>
    <div class="left">
      <i class="glyphicon glyphicon-ok">LIKE</i>
    </div>
    <div class="right">
      <h2>Nakia Case</h2>
      <p>32 anos - Feminino. - Insc. em: 15/05/17 - São Bernardo do Campo/SP</p>
    </div>
  </li>
</ul>

CSS

.left{width: 10%; float: left; border: 1px solid black;}
.right{max-width: 90%; float: left; border: 1px solid black;}
.avaliacao{list-style: none;}
.avaliacao i{border-radius: 50em; width: 30px; height: 50px; border: 1px solid #09f;}
.avaliacao h2{margin: 0; padding: 0;}
.avaliacao p{margin: 0; padding: 0;}

 

Resultado: https://jsfiddle.net/8je0dgsp/

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por FabianoSouza
      Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?
      Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?
       
       
    • Por FabianoSouza
      Tenho essa lista
       
      <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
      Preciso que ele fique assim:
      1    2
      3    4
      5
       
      Como faço um CSS para isso?
       
      Obrigado.
    • Por Bruno Goedert Dalmolin
      Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 
      do HTML:
       
      <header>
          <ul id="Menu">
              <li><a href="SmartAce-Home.html">Home</a></li>
              <li><a href="">Sobre</a></li>
              <li><a href="">Contato</a></li>
          </ul>
      </header>
       
      do CSS:
       
      @charset "UTF-8";
      body {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: #112c38;
      }
      ul#Menu {
          
          text-align: center;
          margin: 0;
          padding: 0;
          display: flex;
          top: -10;
      }
      ul#Menu li{
          list-style: none;
          margin: 0 20px;
          transition: 0.5s;
      }
      ul#Menu li a{
          position: relative;
          text-decoration: none;
          padding: 5px;
          font-size: 18px;    
          font-family: sans-serif;
          color: #fff;
          text-transform: uppercase;
          transition: 0.5s;
      }
      ul#Menu:hover li a {
          transform: scale(1.4);
          opacity: .2;
          filter: blur(5px);
      }
      ul#Menu li a:hover {
          transform: scale(2);
          opacity: 1;
          filter: blur(0);
      }
      ul#Menu li a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ff497c;
          transition: transform 0.5s;
          transform-origin: right;
          transform: scaleX(0);
          z-index: -1;
      }
      ul#Menu li a:hover:before {
          transition: transform 0.5s;
          transform-origin: left;
          transform: scaleX(1);
      }
    • Por matheusdemelovieira
      Oi pessoal bom dia, minha duvida é:
      como eu deixo a li "pedidos de oração"
      em linha reta?
      me ajudem estou travado nisso a horas.
      apenas quero deixar o "pedidos de oração como se fosse numa linha só.


    • Por paikoala
      Bom dia galera, tenho no meu site um menu feito com <li> e precisava que um deles abrisse em uma nova aba
      <li onclick="parent.location='<?php echo base_url(''); ?>''">SITE</li> procurei um monte na internet pra tentar achar e vi o pessoal falando pra colocar o targed _blank mas tentei de tudo quanto é forma e não consigo fazer funcionar, ou ele gera um erro no codigo e zoa o menu ou ele continua abrindo a devida pagina na mesma aba.
×

Informação importante

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