无法使用 CSS 将文本元素放在另一个元素之上

问题描述 投票：0回答：1

我只是一个尝试编程的初学者，我目前正在学习 HTML 和 CSS，我终于开始从事我的第一个合适的项目了。我只是想为本地游戏商店做一个简单的主页，以提高我的基础知识并将迄今为止学到的所有知识付诸实践。

我现在面临的问题是，我不知道如何将第 35 行中的 

<h1>Trabalhamos com as seguintes plataformas:</h1>
放在列表中徽标上方而不是左侧。我知道我们使用 
display: flex
来制作这种东西，但老实说，我什至不知道在同一项目的早期版本中，在我放置这个 
<h1>
标题之前，我是如何得到这个结果的徽标显示在 lorem ipsum 文本下方。我尝试在这个特定的 
display: block
上使用 
<h1>
，但没有成功。除了 
<div>
类之外，甚至尝试使用它自己的规则来尝试整个 
.container
，但它仍然没有按预期工作。经过一些谷歌搜索后，我什至尝试过
flex-direction: column
，但它仍然不起作用。由于我仍然只是一个初学者，所以我实际上不知道我是否使用了正确的属性来允许我做我想做的事情。有人能帮我吗？不仅有解决方案，还有如何实现它以及到目前为止我做错了什么。

这是迄今为止的 HTML 和 CSS 代码：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cobrinha Games - Os maiores games e eletrônicos do Vale</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <header>
        <div class="container">
            <img src="./midia/cobrinha-games-logo.png" alt="Logo Cobrinha Games" id="logo">
            <nav>
                <ul>
                    <li><a href="#">Sobre a Loja</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>
        </div>    
    </header>
    <section id="sobre">
        <div class="container">
            <img src="./midia/foto-loja-cobrinha-games.png" alt="Foto da loja Cobrinha Games" id="fachada">
            <article>
                <h1>Sobre a Loja</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic debitis iusto eum eaque nostrum, possimus, qui pariatur a dolor, quo reiciendis? Aspernatur eveniet illum tenetur quasi vitae fugiat maiores animi?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, laudantium iure ullam delectus quasi architecto cumque et corrupti? At voluptatum eligendi laborum sint voluptas molestiae fugiat esse doloribus obcaecati perferendis.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officia dolores repellendus. Sequi voluptates eum, magnam blanditiis, deserunt sunt dolorem cupiditate velit fugiat officia rem? Quia voluptate eum architecto vitae.</p>
            </article>
        </div>
    </section>
    <section id="plataformas">
        <div class="container">
            <h1>Trabalhamos com as seguintes plataformas:</h1>
            <ul class="brands">
                <li><img src="./midia/psx.svg" alt="Logo Playstation"></li>
                <li><img src="./midia/ps2.svg" alt="Logo Playstation 2"></li>
                <li><img src="./midia/ps3.svg" alt="Logo Playstation 3"></li>
                <li><img src="./midia/ps4.svg" alt="Logo Playstation 4"></li>
                <li><img src="./midia/ps5.svg" alt="Logo Playstation 5"></li>
                <li><img src="./midia/xbox.svg" alt="Logo Xbox"></li>
                <li><img src="./midia/x360.svg" alt="Logo Xbox 360"></li>
                <li><img src="./midia/xone.svg" alt="Logo Xbox One"></li>
                <li><img src="./midia/xseries.svg" alt="Logo Xbox Series X/S"></li>
                <li><img src="./midia/n64.svg" alt="Logo Nintendo 64"></li>
                <li><img src="./midia/gamecube.svg" alt="Logo GameCube"></li>
                <li><img src="./midia/wii.svg" alt="Logo Nintendo Wii"></li>
                <li><img src="./midia/wii-u.svg" alt="Logo Nintendo Wii U"></li>
                <li><img src="./midia/switch.png" alt="Logo Nintendo Switch"></li>
                <li><img src="./midia/psp.png" alt="Logo Playstation Portable"></li>
                <li><img src="./midia/psvita.png" alt="Logo Playstation Vita"></li>
                <li><img src="./midia/gba.svg" alt="Logo Game Boy Advance"></li>
                <li><img src="./midia/nds.svg" alt="Logo Nintendo DS"></li>
                <li><img src="./midia/3ds.svg" alt="Logo Nintendo 3DS"></li>
            </ul>
        </div>
    </section>
</body>
</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

header {
    padding: 8px 0;
    background-color: black;
    color: white;
    background-image: url(./midia/banner-cobrinha-games.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

header nav li {
    display: inline;
    margin-left: 16px;
    font-size: 18px;
}

header nav li a {
    color: white;
    text-decoration: none;
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

header .container,
section .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#logo {
    width: 175px;
}

#fachada {
    width: 60%;
    margin-right: 24px;
}

.brands img {
    height: 30px;
}

.brands li {
    display: inline-block;
    margin-right: 14px;
    margin-bottom: 14px;
}

section .container {
    align-items: flex-start;
}

section {
    padding: 24px 0;
}

h1 {
    display: block;
}

这是这个特定项目的存储库： https://github.com/rodriguesraph/curso_ebac_frontend/tree/projeto_1

提前致谢，任何帮助将不胜感激！

html css
1个回答
0
投票

您可以使用 

flex-direction: column;
属性垂直显示元素

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.