1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Bullets em UL inline

Discussão em 'Web Development' iniciada por .:Red Dragon:., 30 de Junho de 2008. (Respostas: 7; Visualizações: 796)

  1. .:Red Dragon:.

    .:Red Dragon:. Power Member

    Boas!

    Eu tenho uma unordered list (<ul>) e pûs como "display:inline" no CSS. Ao fazer isto, os bullets desaparecem.

    Como faço para meter um bullet ou algo parecido a separar cada item?
     
  2. hYpe

    hYpe [email protected] Member

    Se não me engano o display inline tem que ser no 'ul li' e nao na 'ul'.
     
  3. .:Red Dragon:.

    .:Red Dragon:. Power Member

    Sim o que tenho é "#menu li {"...
     
  4. shello

    shello Moderador
    Staff Member

    Uma opção é dar um padding à esquerda (excepto :first) e adicioanr a imagem de um bullet em background.

    Código:
    #menu li{
        display:inline;
        padding-left:15px;
        background:transparent url(images/menu-bullet.png) no-repeat scroll center left;
    }
    
    #menu li:first-child{
        padding-left:auto;
        background:none;
    }
    
    Não experimentei, mas acho que funciona (se tiveres a imagem no sitío certo).
     
    Última edição: 30 de Junho de 2008
  5. .:Red Dragon:.

    .:Red Dragon:. Power Member

    Não funcionou o #menu li:first... O bullet continua lá.
     
  6. shello

    shello Moderador
    Staff Member

    Erro meu.
    É :first-child e não apenas :first.
     
  7. m.costa

    m.costa Power Member

    O display: inline tira as bullets automaticamente, o melhor que tens a fazer e' adiciona-las 'a mão (dentro de cada <li> por &bull; para simular a bullet), ou então poes um border 'a direita a separar cada item, tipo border-right: 1px solid black .
     
  8. .:Red Dragon:.

    .:Red Dragon:. Power Member

    Obrigado! Resolvido...
     

Partilhar esta Página