Ir para conteúdo

Arquivado

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

janick

Espaço entre li´s

Recommended Posts

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 !

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Experimenta usar assim:

 

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

 

Isso representa "entre" os itens eles...

 

Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

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

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

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.