Ir para conteúdo

POWERED BY:

Arquivado

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

Andreher

[Resolvido] Como fazer lista horizontal de divs

Por , em Desenvolvimento frontend

Recommended Posts

Andreher    0

Andreher
Postado

Olá, estou configurando o meu portfolio pessoal para trabalhar com wordpress mas de cara ja tive um problema :( heheeheh

 

O negócio é o seguinte. Quero que a lista de postagens apareçam uma do lado da outra, pra isso preciso configurar de modo que fique assim:

exemplo1.jpg

 

 

Porém está ficando assim:

exemplo2t.jpg

 

o que estou fazendo de errado?

como poderia solucionar este problema?

 

aqui está o html

<html>

<head>

<title> André Quintão - WebPortfolio </title>

<link href="estilo.css" type="text/css" rel="stylesheet">

</head>

<body>

<div id="tudo">

<div id="topologo">

<h1> <img src="imagens/logo.jpg"></h1>

</div>

<div id="menu">

<ul>

<li> <img src="imagens/cases.jpg"> </li>

<li><img src="imagens/webdesign.jpg"></li>

<li> <img src="imagens/artedigital.jpg"></li>

<li> <img src="imagens/sobre.jpg"> </li>

<li> <img src="imagens/contato.jpg"> </li>

</ul>

</div>

 

<div id="principal">

<img src="imagens/casestitulo.jpg">

<ul class="teste">

<li class="teste">

<div id="trabalhos">

<img src="imagens/forcasarmadas.jpg">

<h1> Forças Armadas</h1>

<p> Case com uma campanha nacional de prospecção de voluntarios ao serviço militar</p>

</div>

</li>

<li class="teste">

<div id="trabalhos">

<img src="imagens/forcasarmadas.jpg">

<h1> Forças Armadas</h1>

<p> Case com uma campanha nacional

de prospecção de voluntarios ao

serviço militar</p>

</div>

</li>

</ul>

 

 

</div>

<div id="divclear"></div>

 

<div id="rodape">

Website layout e desenvolvimento por André Quintão. Utiliza tecnologia Wordpress, Xhtml, CSS e Javascript.

</div>

</div>

 

</body>

 

</html>

 

e aqui o css

 

*{

margin:0px;

padding:0px;

}

#divclear{

clear:both;

}

 

body{

background-color:#efefef;

}

 

#tudo{

margin: 0px auto;

background-color:#efefef;

width: 610px

}

 

 

 

 

#menu{

border-top: 3px solid black;

border-bottom: 3px solid black;

height:50px;

margin-bottom:20px;

 

}

#menu ul{

list-style-type: none;

margin-top:10px;

margin-left:20px;

}

#menu li{

display:inline;

padding:0px 40px 0px 0px;

}

#topologo{

margin-left:20px;

margin-bottom:35px;

margin-top:30px;

}

#principal{

height:700px;

border-bottom: 2px #c6c6c6 solid;

}

#trabalhos{

margin-top:30px;

width:170px;

}

#trabalhos h1{

font-size:15px;

margin-top:5px;

 

}

#trabalhos p{

font-size:12px;

color:#a5a5a5;

 

}

ul.teste{

list-style-type: none;

display:inline;

}

li.teste{

display:inline;

}

#rodape{

background-color:#686868;

font-size:12px;

color:#b2b2b2;

padding: 20px 0 0 30px;

height:40px;

border-top:2px #969696 solid;

}

 

desde já agradeço imensamente qualquer ajuda! :joia:

 

é isso galera, espero que consiga resolver meu problema :ermm:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andreher    0

Andreher
Postado

Andreher aplique uma largura na tua div principal e na tua li.teste aplique um float.

 

Funcionou! :joia: :clap:

 

muito obrigado Vanilson! parabens! :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito