3

Tenho a seguinte lista:

li {
  display: inline-block;
  padding: 20px;
  background: red;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Como faço para colar os itens da lista sem ter que colocar uma margem com valor negativo?

3 Respostas 3

7

Este espaçamento ocorre porque os elementos com inline-block faz com que espaçamentos de quebra de linhas ou espaços normais afetem a renderização, já que este é o efeito esperado da propriedades que usam inline (como inline-block e inline-table)

Para corrigir você pode usar float:; e clear com um "pseudo elemento" (::after):

.itens {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  float: left;
  padding: 20px;
  background: red;
}

.itens::after {
  clear:both;
  content: "";
  display: block;
}
<ul class="itens">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ou definir a font-size como 0 no ul:

.itens {
  font-size: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  display: inline-block;
  padding: 20px;
  background: red;
  font-size: 11pt;
}
<ul class="itens">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Para ver como é as quebras de linha que afetam remova qualquer espaço entre os LIs:

.itens {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  display: inline-block;
  padding: 20px;
  background: red;
  font-size: 11pt;
}
<ul class="itens">
  <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

3
  • Muito boa sua resposta amigo, resolveu meu problema, obrigado. Commented 20/12/2016 às 12:09
  • @LaércioLopes por favor marque como correta a resposta que mais lhe agradou, como aceitar: meta.pt.stackoverflow.com/q/1078/3635
    – Syzoth
    Commented 20/12/2016 às 13:06
  • Macado, obrigado não tinha feito isso antes... Commented 21/12/2016 às 15:13
4

Uma outra sugestão é usar comentários no HTML entre os LI's para ficar bem identado.

.itens {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  display: inline-block;
  padding: 20px;
  background: red;
  font-size: 11pt;
}
<ul class="itens">
     <li>Item 1</li><!--
  --><li>Item 2</li><!--
  --><li>Item 3</li>
</ul>

1
  • Obrigado pela dica amigo, isso ajuda a deixar o código legível. Commented 20/12/2016 às 12:08
-3
<head>
 <style>
    .itens {
        list-style: none;
        margin-left:-5%;
    }
    </style>
</head>

<body>

<ul class="itens">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
</ul>

</body>
0

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 .