8

Estou tentando criar uma lista com 4 blocos, porém os mesmos não ficam alinhados lado-a-lado de forma correta, estão assim:

inserir a descrição da imagem aqui

Gostaria que ficassem assim:

inserir a descrição da imagem aqui

HTML:

<li></li>
<li></li>
<li></li>
<li></li>

CSS

#test li {
    width: 230px;
    height: 140px;
    margin: 0;
    border: 1px solid red;
    background: #999;
    float: left;
    overflow: hidden;
}

Por que não estão alinhando?

5
  • A seção pai tem tamanho fixo? Os float: left não vão ajudar se a seção ocupar um tamanho variável com o redimensionar do browser.
    – rodrigogq
    Commented 3/12/2014 às 3:37
  • Não entendi, amigo, como assim seção pai? Commented 3/12/2014 às 3:39
  • <div id="pai"><ol><li></li></ol></div> Neste caso, sua <ol> ou sua <div> tem width especificado? Ou quando você redimensiona o browser os seus <li> vão se movendo?
    – rodrigogq
    Commented 3/12/2014 às 3:42
  • Sim, a div tem o tamanho de 1000px. Commented 3/12/2014 às 3:44
  • Neste caso o float: left vai fazer o elemento flutuar e preencher o espaço que estiver disponível. Você precisa aumentar o tamanho do width do seus li (algo como 500px talvez) ou mudar de li para div.
    – rodrigogq
    Commented 3/12/2014 às 3:59

6 Respostas 6

7

Segue uma solução CSS3 que leva em conta vários fatores:

  • Largura variável: você pode mexer no tamanho da UL, que as células acompanharão;

  • Segurança ao definir os 50% para não "estourar" o espaço disponível por inconsistências do browser;

  • Inclui a solução para o "quadriculado" das cores em CSS (mesmo que seja só pra ilustrar, é legal saber como se faz);

html, body, ul {      /* aqui o que importa é o UL, o resto é pra estética do demo.          */
  position:relative;  /* reset do position, não relacionado ao demo, mas bom pra uso geral.  */
  margin:0;           /* Zeramos as margens e o padding do UL para as células.encostarem     */
  padding:0;
  width:100%;         /* por default, os blocos são 100%, mas vamos garantir isso.           */
  height:100%;        /* aqui foi feito pra fins de demonstração apenas.                     */
}


li {
  display:block;             /* primeiro passo, transformar o LI em bloco.                   */ 
  list-style-type: none;     /* depois, remoção dos bullets.                                 */
  margin:0;                  /* nao queremos espaços ente os blocos.                         */
  background-color:#666;     /* cor de fundo principal, o "grid" fazemos depois              */
  box-sizing: border-box;    /* medidas são de borda à borda, o padding não é acrescentado.  */
  height:25%;                /* esta linha é pela estética do demo                           */
}

li:nth-child(odd) {          /* este css será aplicato nos LI impares (1, 3, 5... ).         */
  clear:both;                /* forçamos a quebra de linha por segurança...                  */
  float:left;                /* ... e o alinhamos à esquerda.                                */
  width:50%;                 /* Aplicamos 50% na esquerda, os da direita "herdam" o resto.   */
}

li:nth-child(4n+2),          /* aqui pulamos de 4 em 4 itens começando do 2 ( 2, 6, ...).    */
li:nth-child(4n+3) {         /* aqui de 4 em 4 começando do 3 ( 3, 7, ... )                  */
  background-color:#444;     /* e mudamos a cor, dando efeito de quadriculado                */
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

1
  • 1
    Muito Obrigado, cara! Commented 3/12/2014 às 22:56
5

Você poderia fazer isso afetando apenas os blocos ímpares:

ul li {
  width: 230px;
  height: 140px;
  margin: 0;
  border: 1px solid red;
  background: #999;
  overflow: hidden;
}

ul li:nth-child(odd) {
  float:left;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
5
  • 1
    Muito Obrigado, cara! Commented 3/12/2014 às 23:03
  • Cara, e se eu quiser acrescentar mais um bloco só que maior, ficando 4 de 230x140px e outro 250x280px, o maior no início e os 4 ao lado? eu tentei, mas ficou um "pra fora" Commented 4/12/2014 às 17:25
  • Ex: s18.postimg.org/cmwrc02ux/Untitled_1.jpg Commented 4/12/2014 às 17:28
  • 1
    @user3386417 isso ainda é uma lista? Parece uma row com três colunas. Seria interessante você criar uma nova pergunta com a imagem e o código, aqui fica complicado responder.
    – Paulo
    Commented 4/12/2014 às 17:34
  • isso @NGTHM4R3, marca essa a que atendeu melhor como resposta, cita em uma nova pergunta essa pergunta, mas que agora precisa de mais um bloco, so que maior a esquerda. E certeza que rápidinho a gente responde, serio, a galera responde muuuito rápido, eu nem consigo responder :/
    – David
    Commented 17/05/2016 às 20:53
3

Você também pode definir a largura como sendo 50%

ul{width: 400px; height: 400px; list-style:none; margin:0; padding: 0; font-family: Arial; color: #FFF; font-size: 1.5em}
li{float: left; width:50%; height: 50%; padding: 0; background-color: #292929;}
li:first-child, li:last-child{background-color: #222222 !important;}
li > span{display: block; width: 100%; text-align: center; padding: 44% 0;}
<ul>
  <li><span>1</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
</ul>

1
  • E a Navalha de Ockham ataca novamente. :) Commented 3/12/2014 às 11:37
0

Atribuindo o display: inline-block resolve em parte, você também pode adicionar width para quebrar de acordo com o tamanho. Espero que dessa vez ajude e esclareça as dúvidas. Segue link muito bom: http://pt-br.learnlayout.com/inline-block.html

ul {width: 30px;}
ul li {
    display: inline-block;
}
4
  • 1
    Porque não fornece resposta? Deveria era ser melhorada.
    – Jorge B.
    Commented 4/02/2016 às 9:34
  • Responder apenas com código não explica o real procedimento para resolução do problema. Tente editar sua resposta. Commented 4/02/2016 às 9:48
  • @CelsomTrindade concordo com o JorgeB, o único problema da resposta e não dar uma explicação sobre a resolução, mas não há nada de errado em colocar só código (mesmo que seja uma só linha).
    – jpmnteiro
    Commented 4/02/2016 às 11:41
  • @Omni Mas neste caso, o que o código dele vai fazer pra resolver o problema? como vai ajudar? Apenas mudar para inline-block não responde e muito menos resolve o problema. Commented 4/02/2016 às 11:58
0

Eu particularmente prefiro usando "display: inline-block", pois usando usando float faz com que o elemento pai(no caso a "ul") perca a altura, e com isso voce precisa de mais propriedade(s) para que a "ul" não perca altura.

ul {
  font-size: 0;
}
ul li {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  height: 140px;
  margin: 0;
  border: 1px solid red;
  background: #999;
  overflow: hidden;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

-1

Solução correta:

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

Referência: https://www.w3.org/TR/css-multicol-1/

4
  • Não, não é a solução correta amigo Commented 31/08/2020 às 14:38
  • Você diz que não. Qual solução semântica então você daria sem JS e que o CSS já provê isso? Commented 1/09/2020 às 15:28
  • Ta vendo o CSS dele, está assim #test li {..., provavelmente quer dizer que antes da LI deve ter a UL com o ID test, outra coisa, seu CSS não funciona, não está como a imagem de exemplo de referencia. E achei estranho vc falar que é a "resposta correta", pq as outras não são, já tem resposta falando de UL, e o CSS aqui não resolve a pergunta... foi só uma observação ok, testa ai o seu código que vc vai ver Commented 1/09/2020 às 17:45
  • Dei exemplo das propriedades CSS, nao em cima do exemplo do cara. Mostrei as pripriedades que devem ser utilizadas apenas. Commented 2/09/2020 às 18:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .