Publicado em 14 de jan.

[Resolvido] Exibição inline de lista

Olá.

Gostaria de saber como exibir uma lista inline, mas com um elemento block level dentro.

No código abaixo, por exemplo, se eu colocar um parágrafo dentro de um elemento li, a lista é renderizada da forma tradicional:

li
{

	display: inline;
	margin: 5px;
	border: 1px solid blue;
	width: 200px;
}
 

<ul>
	<li>sadsd</li>
 <!-- aqui está o problema -->
	<li>çl ksdklçsa <p>lçk sadkkdl</p>kl jdas</li>
	<li>sadsd</li>
</ul>

Obrigado.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carlos Designer· 14 de jan.

Opa!

Então Marcio Leandro, basta adicionar um float na lista, algo assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

ul li{

display:inline;
float:left;
border:1px solid #000;
}
</style>
<title>Listas</title>
</head>
<body>
<ul>
<li><p>Algum texto no paragrafo</p><p>Algum texto no paragrafo</p></li>
<li><p>Algum texto no paragrafo</p><p>Algum texto no paragrafo</p></li>
<li><p>Algum texto no paragrafo</p></li>
<li><p>Algum texto no paragrafo</p></li>
</ul>
</body>
</html>

Seria isso mesmo?

Marcio Leandro· 15 de jan.

Exatamente isto.

Questão resolvida.

Só por curiosidade, você sabe porque acontece isso, digo, não funcionar apenas com o display inline ??

Paulo de Tarso F. M.· 15 de jan.

Porque o <p> não é inline, por padrão. Por mais que o <li> tenha sido formatado para inline, o <p> não foi modificado, então, prevalece a "força" dos elementos nível-de-bloco.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif