Lucas Barreto Postado Junho 16 Compartilhar Postado Junho 16 Boa noite Galera não estou conseguindo colocar essa barrinha vertical no meu footer. Alguem poderia me ajudar? Desde já agradeço 1 Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Tiago Neves Postado Junho 16 Compartilhar Postado Junho 16 Fala, @Lucas Barreto! border-left: solid 1px #aab1bf; height: 25px; margin: 0 10px; faça uma div entre os elementos: <div class="divider"></div> e use esse css 1 Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 16 Autor(a) Compartilhar Postado Junho 16 @Tiago Neves ficou assim Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 17 Autor(a) Compartilhar Postado Junho 17 @Tiago Neves Eu acho que está errado Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Tiago Neves Postado Junho 17 Compartilhar Postado Junho 17 Se você inspecionar o elemento no site do https://ge.globo.com/, você irá notar que eles colocam dentro de cada <li> <li class="footer__service-list-item"><a href="//www.globo.com/privacidade.html">política de privacidade</a></li> esse css: .footer__service-list-item { border-left: 1px solid rgba(255, 255, 255, 0.3); <--- isso seria a barra que você quer padding: 0 5px 0 7px; font-family: var(--font-family-book), var(--font-family-book-fallback); font-size: var(--font-size-20-responsive-book); letter-spacing: var(--font-size-20-responsive-book-letter-spacing); } Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 17 Autor(a) Compartilhar Postado Junho 17 @Tiago Neves obrigado Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 17 Autor(a) Compartilhar Postado Junho 17 @Tiago Neves Ficou assim no ultimo link teve o risco á direita Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 17 Autor(a) Compartilhar Postado Junho 17 @Tiago Neves, consegui arrumar obrigado 1 Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 20 Autor(a) Compartilhar Postado Junho 20 @Tiago Neves não estou entedendo o porque que a margin aparece depois do link de contato Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Tiago Neves Postado Junho 20 Compartilhar Postado Junho 20 .footer__service-list-item:first-child { border-left: 0; padding-left: 0; } .footer__service-list-item:last-child { padding-right: 0; } .footer__service-list-item:first-child: Seleciona o primeiro item da lista (:first-child) que está dentro de um contêiner com a classe footer__service-list-item. border-left: 0;: Remove qualquer borda do lado esquerdo do primeiro item da lista. padding-left: 0;: Remove qualquer preenchimento (espaço interno) do lado esquerdo do primeiro item da lista. .footer__service-list-item:last-child: Seleciona o último item da lista (:last-child) que está dentro de um contêiner com a classe footer__service-list-item. padding-right: 0;: Remove qualquer preenchimento (espaço interno) do lado direito do último item da lista. Essas regras são frequentemente usadas para estilizar listas de itens em um rodapé ou em um menu. A remoção da borda e do preenchimento no primeiro e no último item da lista ajuda a alinhar os itens corretamente e pode evitar a criação de espaços indesejados nas extremidades da lista. Por exemplo, imagine uma lista horizontal de links de serviço no rodapé de um site. Ao remover a borda e o preenchimento nos itens das extremidades, você pode criar uma aparência mais limpa e organizada: <ul class="footer__service-list"> <li class="footer__service-list-item">Item 1</li> <li class="footer__service-list-item">Item 2</li> <li class="footer__service-list-item">Item 3</li> </ul> Aqui, o primeiro item (Item 1) terá a borda e o preenchimento à esquerda removidos, enquanto o último item (Item 3) terá o preenchimento à direita removido, criando uma lista visualmente agradável e bem alinhada. 1 Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Lucas Barreto Postado Junho 20 Autor(a) Compartilhar Postado Junho 20 @Tiago Neves Obrigado 2 Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Postagens Recomendadas
Crie uma conta ou entre para comentar 😀
Você precisa ser um membro para deixar um comentário.
Crie a sua conta
Participe da nossa comunidade, crie sua conta.
Criar minha conta agoraÉ bem rápido!
Entrar
Você já tem uma conta?
Entrar agoraFaça o login agora.