Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Problema com "display: inline-block;"

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Nem tudo é o que parece e atividade Image replacement

por Thiago SC
| 220.7k xp | 17 posts

Bom sempre consegui usar display: inline-block para fazer uma fila ex: 1,2,3 porem depois do exercício meu display fica: 1 2 3

procurei na internet alguma soluções mais elas alteram muito e saem da ideia do projeto fora que eu preciso descobrir onde estou errando.

código html

          <ul class="social-icons">
              <li>
                  <a class="github-icon" href="https://github.com/git-joaodasilva">github</a>
              </li>
              <li>
                  <a class="twitter-icon" href="https://twitter.com/twitter-joaodasilva">twitter</a>
              </li>
              <li>
                  <a class="linkedin-icon" href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">linkedin</a>
              </li>
          </ul>

codigo css

.social-icons a{
  width: 40px;
  height: 40px;
  display: inline-block;
  text-indent: -99999px;
}

.github-icon{
  background-image: url(github.png);
}

.twitter-icon{
  background-image: url(twitter.png);
}

.linkedin-icon{
  background-image: url(linkedin.png);
}
6 respostas
por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Acredito que é por que você deveria aplicar o inline block em social-icons li

.social-icons li{
    display: inline-block
}

Testei aqui e funcionou para eles ficarem lado a lado

por Thiago SC
| 220.7k xp | 17 posts

Allan, quando eu faço isso os ícones simplesmente não aparecem, foi uma das primeiras coisas que tentei. Acontece que ou uso: 

.social-icons li{
  width: 40px;
  height: 40px;
  display: inline-block;
  text-indent: -99999px;
}

ícones somem ou eu uso: 

.social-icons a{
  width: 40px;
  height: 40px;
  display: inline-block;
  text-indent: -99999px;
}

e eles ficam empilhados ao invés de enfileirados...

por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Quando você colocar o online block na li , você vai ter que colocar o Display block no li a

.social-icons a{ width: 40px; height: 40px; display: block; text-indent: -99999px; }

Atualiza seu código com esse snippet e o displaying online block na li e me diz como ficou

por Thiago SC
| 220.7k xp | 17 posts

Tentei já usar apenas block acontece q ele continua empilhado mais fica no canto da tela inferente do inline block q deixa no meio, se eu usar no "li" com apenas block tbm some.

solução!
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Thiago, uma implementação para solucionar essa questão é a seguinte:

.social-icons a{
  width: 40px;
  height: 40px;
  text-indent: -99999px;
}

ul{
    list-style: none;
}
ul li{
    display: inline;
}

.github-icon{
  background-image: url(github.png);
}

.twitter-icon{
  background-image: url(twitter.png);
}

.linkedin-icon{
  background-image: url(linkedin.png);
}

O navegador aplica regras automáticas em alguns elementos de bloco a lista é uma delas é preciso sobrescrever essas regras. Espero ter ajudado.

por Thiago SC
| 220.7k xp | 17 posts

Maison Galvão valeu mesmo essa foi a solução mais simples que achei e como usei "reset css"da aula não pensei nisso!