[Dúvida] Aquecimento CSS - Aula 7: padding em lista de links não funciona

Olá a todos.

Estou com dificuldade em uma coisa específica do final da Aula 7 da playlist de CSS (fase de aquecimento). Kai adiciona padding: 10px na tag a e o resultado é que la lista com os links exibidos um ao lado do outro a gente não tem como saber em qual deles vai clicar ao posicionar o cursor do mouse entre os links. Então Kai diz que o melhor é aplicar esse padding à tag li para resolver o problema.

Acontece que meu código está idêntico ao da aula e o problema persiste. Não dá pra saber em qual link vou clicar quando posiciono o cursor entre dois links. Alguém sabe como resolver isso?

Meu código CSS:

body {
    text-align: center;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
}

p {
    text-align: justify;
    padding: 0 10px;
}

.lista__footer {
    list-style: none;
    display: flex;
    justify-content: center;
}

a {
    text-decoration: none;
}

li {
    padding: 10px;
}

Meu código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Cristiane dos Santos Costa</h1>
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt rerum itaque veritatis molestias nostrum minima explicabo tenetur ea fugit perferendis amet quaerat, asperiores et tempore fugiat temporibus est, reprehenderit omnis!</p>
        <p>Consequuntur, natus totam. Quos assumenda excepturi molestiae. Modi quidem ad, ducimus dolor cumque voluptates quo aperiam laudantium animi accusantium. Qui, placeat maxime.</p>
    </div>
    <footer>
        <ul class="lista__footer">
            <a href=""><li>Nossa missão</li></a>
            <a href=""><li>Nossas lojas</li></a>
            <a href=""><li>Trabalhe conosco</li></a>
        </ul>
    </footer>
</body>
</html>

posta o html também, pra gente poder ver onde está linkado as url

1 Like

Eu editei para incluir o código HTML também. As urls dos links não estão linkadas no código, mas isso não faz diferença. Quando posiciono o cursor entre dois links, o ícone da mãozinha aparece e não dá pra saber em qual link vou clicar, a menos que eu de fato clique. Neste caso a cor da fonte muda (ela “pisca” em outra cor com o clique).

Olá, acredito que a própria Kai tenha se enganado no HTML dessa aula, ela ajusta o CSS, porém é necessário ajustar o HTML também. Experimente colocar a lista assim:

<ul class="lista__footer">
    <li><a href="">Nossa missão</a></li>
    <li><a href="">Nossas lojas</a></li>
    <li><a href="">Trabalhe conosco</a></li>
</ul>
2 Likes

Exatamente, a tag do link tem que está dentro da tag li

Deu certo! Muito obrigada, Douglas! Bem que eu desconfiei que ela havia se enganado porque no vídeo o problema continuou aparecendo, mas ela não percebeu. Valeu mesmo :slight_smile:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.