Jump to content

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


Alex Bianchi

Postagens Recomendadas

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

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

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

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

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


×
×
  • Create New...