Publicado em 16 de jun.

Criar esse layout com LI

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

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!

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

viniciussvl· 17 de jun.

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/

FabianoSouza· 17 de jun.

Valew

viniciussvl

Sua sugestão ficou ótima!