Jump to content

Gostaria de tirar uma dúvida sobre css no html (usando no VS Code)

Alex Bianchi

Por Alex Bianchi
em HTML & CSS

 Compartilhar

Postagens Recomendadas

Alex Bianchi

Alex Bianchi

Postado
Postado

o problema é o seguinte, eu estava treinando meu primeiro projeto quando eu me deparo com um erro no código onde eu tento utilizar este:

.redes-sociais ul li{

    text-indent: -99999px;

    width: 20%;

}

ul{

    list-style: none;

    float: right;

}

ul li{

    display: inline;

}

.redes-sociais{

    width: 20%;

}

 

e os ícones das redes sociais não alinham como desejado 1479908324_Semttulo.png.77fa1d95359341a2ac65eea117509e40.png

obs, o resultado deveria ser esses ícones do linkedin alinhas com a logo e um pouco espaçado entre eles

Link to comment
Compartilhe em outros sites
Alex Bianchi

Alex Bianchi

Postado
  • Autor(a)
Postado

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <link rel="stylesheet" href="./css/main.css">

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Primeiro Projeto</title>

</head>

<body>

    <header class="menu-principal">

        <main>

        <div class="header-1">

        <div class="logo">

            <img src="./img/logo.png">

        <div class="rede-sociais">

            <ul>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

 

            </ul>

        </div>

 

        </div>

            </main>

    </header>

</body>

</html>

Link to comment
Compartilhe em outros sites
Alex Bianchi

Alex Bianchi

Postado
  • Autor(a)
Postado
13 horas atrás, Alex Bianchi disse:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <link rel="stylesheet" href="./css/main.css">

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Primeiro Projeto</title>

</head>

<body>

    <header class="menu-principal">

        <main>

        <div class="header-1">

        <div class="logo">

            <img src="./img/logo.png">

        <div class="rede-sociais">

            <ul>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

 

            </ul>

        </div>

 

        </div>

            </main>

    </header>

</body>

</html>

@carlosscheffer  @Danilo Duarte Ribeiro  @Kleverson Cruz

Link to comment
Compartilhe em outros sites
Alex Bianchi

Alex Bianchi

Postado
  • Autor(a)
Postado
Em 26/11/2021 at 09:45, Danilo Duarte Ribeiro disse:

Como está a estilização da div "logo"? Acredito que o problema possa ser nela ou na div "header-1".

Tente usar display flex em uma delas.

Uma ferramenta legal pra ver como está o layout no browser é usar o inspetor de elementos nas ferramentas de desenvolvedor.

tem como me explicar melhor?

 

Link to comment
Compartilhe em outros sites
Danilo Duarte Ribeiro

Danilo Duarte Ribeiro

Postado
Postado

Por padrão, os elementos são posicionados um abaixo do outro. Se vc utilizar a propriedade  

display: flex;

na div pai, ou seja, que envolve o título e as logos, os elementos passam a ficar um ao lado do outro, conforme abaixo.

image.png

Talvez também seja necessário utilizar width como 100% nessa div também.

Daí para alinhar no eixo vertical, conforme a imagem abaixo, utilize  

align-items: center;

image.png

e para deixar os elementos filhos alinhados na horizontal de forma que se espalhem de cada canto, conforme a imagem abaixo, você pode utilizar 

justify-content: space-between;

ou alguma das outras opções a seguir.

image.png

Se ainda tiver dúvidas, procure sobre flexbox no CSS.

Espero ter ajudado 🙂

Link to comment
Compartilhe em outros sites

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.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...