Ir para conteúdo

POWERED BY:

Arquivado

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

luqfreitas

Espaço entre as li's

Recommended Posts

Fala galera, eu gostaria de saber se há como eu botar um espaço entre uma li e outra do tipo

 

 

 

<li>UM</li>

<li>DOIS</li>

<li>TRÊS</li>

<li>QUATRO</li>

<li>CINCO</li>

<li>SEIS</li>

 

entrei as lis TRÊS e QUATRO eu gostaria de dar um espaço maior do que as demais, tem como?

Me ajude por favor

grato

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tem alguns métodos de se fazer isso...

 

o mais simples é criar uma classe no CSS com um espaçamento maior e vc aplica somente nos li' que vc deseja esse espaço maior.

 

Take a look:

 

.espacoNormal {
       margin:10px 0;
}

.espacoMaior{
      margin: 15px 0;
}
<li class="espacoNormal">UM</li>
<li class="espacoNormal">DOIS</li>
<li class="espacoMaior">TRES</li>
<li class="espacoMaior">QUATRO</li>
<li class="espacoNormal">CINCO</li>

 

Vlw!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não deu certo, já tem uma class na li será que tá dando erro por isso? to fazendo em html 5!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não deu certo, já tem uma class na li será que tá dando erro por isso? to fazendo em html 5!

A solução do Eduardo é a melhor! Se sua li já tem uma classe, coloca outra! Qual o problema?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde,

 

Creio que pseudo elemento resolva seu problema.

 

XHTML

<ul id="menu">
    <li>UM</li>
    <li>DOIS</li>
    <li>TRÊS</li>
    <li>QUATRO</li>
    <li>CINCO</li>
    <li>SEIS</li>
</ul>

 

CSS

#menu li:nth-child(3),li:nth-child(4) {
	margin:10px 10px 10px 0;
	border:1px solid #F00;
	padding:5px;
}

 

* Funciona somente no IE9 e IE10.

 

Espero que ajude.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia,

 

Tem uma maneira alternativa (gambiarra .. rsrs) para funcionar nos IE's 7/8.

/* For IE's 7/8 */
#menu > li:first-child + li + li, #menu > li:first-child + li + li + li {
  margin:10px 10px 10px 0;
  border:1px solid #F00;
  padding:5px;
}

http://angelorubin.besaba.com/PseudoSeletorCss3/child.php

 

Se quiser testar aqui - http://netrenderer.com/index.php

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.