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

Por , em Desenvolvimento frontend

Recommended Posts

Israel Elias    8

Israel Elias
Postado

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

Fernando Gyn    0

Fernando Gyn
Postado

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

Fernando Gyn    0

Fernando Gyn
Postado

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
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