Espaço entre li´s

[janick 1]

Olá !

 

Tenho um menu com fotos, thumbs, uma abaixo da outra. Tipo:

 

<li><a href="link"><img src="thumb.jpg" /></a></li>

Elas estão dentro de uma div com overflow scroll.

 

Coloquei o espaçamento entre as li´s, usando margin-bottom: 10px.

 

O problema é que ele dá este margin-bottom até na ultima imagem, e desregula um pouco o layout.

 

Então a pergunta que não quer calar, existe como definir um espaçamento entre estas li´s ?

 

Valeu !

[programador php 0]

e se você usar line-height: ;

 

 

ou define para a ultima LI uma classe que zera as margens

 

abraço

[brcontainer 16]

Ponha um link para vermos acredito que o problema seja outra coisa ;)

[janick 1]

não tenho como postar o link agora pois estou testando localmente.

de qualquer maneira é isso:

 

____________________

|_____|

_____

|_____| <<< Esta é minha lista com margin-bottom de 10px.

_____

|_____|

____________ <<< Espaço indesejado

 

 

Isto é, abaixo de cada li coloca 10px de espaço, inclusive na ultima, deixando este espaço no fim.

Queria saber se tem como definir o espaço ENTRE as li´s, e nao top ou bottom.

É isso, foi mal o desenho tosco.

[brcontainer 16]

Bem assim com desenho não da para ajudar pois o problema é com o código

assim fica dificil ;P

[janick 1]

o código é como falei acima:

 

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

e o css seria tipo isso

 

ul {
overflow-y: scroll;
width: 300px;
height: 200px;
}

li {
margin-bottom: 10px;
}

[programador php 0]

você tentou fazer o que eu disse?

[brcontainer 16]

Bem você pode fazer assim:

Use uma condição em PHP ou outra linguagem SERVER-SIDE para adicionar a CLASSE zera no ultimo LI

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li class="zera">item</li>
</ul>

CSS:

ul {
overflow-y: scroll;
width: 300px;
height: 200px;
}

li {
margin-bottom: 10px;
background:#fc0;
}
li.zera {
margin:0;
}

[janick 1]

ah tá beleza, entendi.

vou tentar fazer essa condição em php

valeu!

[neoHaT 0]

Experimenta usar assim:

 

li + li { margin-top: 10px; }

 

Isso representa "entre" os itens eles...

 

Abraços.

[Giovani 104]

Pessoal, vamos prestar atenção na data dos posts hein :)

[William Bruno 1501]

Então, mas como não vi uma 'solução boa', eu usaria um :last-child, para pegar o último <li>, e remover a margem dele.

 

mesmo o post sendo antigo, continua sem solução, e alguém o encontrou pesquisando.

Vale a pena não barrarmos a discursão.

[Evandro Oliveira 331]

A alternativa EL + EL funciona para IE7, :last-child não.

 

Outra sugestão é setar o margin-bottom da ul com tamanho negativo.

 

 

[Ronnie Quintino 0]

Blz janick; bom dia.
Seu problema esta provavelmente na margem certo? Vc zera ela no css e mesmo assim existe um espaço lateral entre as divs.
Ok... isso ñ se resolve com css; tenho quase certeza d q vc esta utilizando o... Dreamweaver certo?
Bom.. este problema vem da identação... e eu citei o DreamWeaver pq ele adora dar este bug.
É o seguinte... vc vai resolver seu problema em 5segundos...
Seu código esta assim...

<ul>
<li>tralálá</li>

<li>tralálá</li>

</ul>

ok; agora faça isso:

<ul>
<li>tralálá</li><li>tralálá</li>

</ul>

sim; tire TOTALMENTE o espaço entre um <LI> e outro...
isso resolvera seu problema...
fica feio.. mas depois vc pode identar no notepad por exemplo ;-)

Com isso a margin-right: do além ira sumir...

[digitalctzen 0]

o método com margin-bottom funciona perfeitamente para este feito, testado e aprovado !

display:block;

margin-bottom:35px;

[celsomtrindade 2]

Voce ja tentou assim?

 

li {

Display:block;

Margint:5px 0;

}

 

li:last-child {

margin-bottom:0;

}

 

Acredito que resolva =D

[digitalctzen 0]

Voce ja tentou assim?

 

li {

Display:block;

Margint:5px 0;

}

 

li:last-child {

margin-bottom:0;

}

 

Acredito que resolva =D

 

 

Se eu nao me engano, last-child nao tem support no ie.. talvez so tenha do ie9 pra cima

[rikaschmitt 54]

IE8 pra baixo é tiro na cabeça. :skull: