Ir para conteúdo

POWERED BY:

Arquivado

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

Israel Elias

Largura automático de caixas dentro de ul

Recommended Posts

Fala galera beleza

 

Galera queria saber como deixa as caixas dentro da ul com largura automatica, tipo as caixa dentro da ul preencher todo o espaço na largura automaticamente

 

o meu script ta assim:

<html>
<head>
<title>titulo da pagina</title>
<style type="text/css">
*{margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}
ul{margin:20px;padding:7px;width:683px;height:auto;background-color:#FF7F27;display:inline-block;list-style:none;text-align:center;border:1px solid #000000;}
ul li{width:auto;height:auto;margin-left:8px;background-color:#00CC33;float:left;padding:30px;border:1px solid #000000;}
.caixa1{background-color:#FFC90E;}
.caixa2{background-color:#C8BFE7;}
</style>
</head>

<body>
<ul>
         <li class="caixa1"> caixa 1 </li>
         <li class="caixa2"> caixa 2 </li>
</ul>
</body>
</html>

 

uma imagem como tá aparecendo no html acima:

caixa1.png

 

queria que ficasse assim, com as duas caixa preenchendo automaticamente todo o espaço da ul exemplo abaixo:

caixa2.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Coloque um tamanho na li.

conforme a quantidade que deseja por linha por exemplo

li{  
  width:50%;
}

 

acredito que elas estejam usando preenchendo o espaço total,

mas elementos com float "não ocupam espaço"

 

por isso elas não estão colocando como deseja, ele esta ocupando o espaço total mas de acordo com o conteúdo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas tipo coloquei apenas como exemplo, não apague o que fez, apenas acrescente isso no seu código.

 

e mais uma coisa coloquei os 50% como exemplo.

adeque ao tamanho deseja, considerando os seus padding, margin etc.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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