Question

这是我的代码，我有一些问题因为主要在标题和我的opionion它不应该:)我不知道为什么主要在标题下而不是ony在列中的一个？我不知道如何解决这个问题？我想制作flexbox SPA。

任何人都可以帮忙，看看我做错了什么？因为我试图自己解决它，但无法做到。

最佳

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}


.main-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: #0dfd8d;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
}

.main-header__logo {
    text-decoration: none;
}

.main-header__logo img {
    height: 7rem;
    vertical-align: middle;
}

.main-header__items {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-header__item {
    margin: 1rem;
}

.main-header__item a {
    text-decoration: none;
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <div class="main-header__logo">
           <a href="#"><img src="logo.png" alt="logo"></a>
        </div>
        <nav class="main-header__nav">
            <ul class="main-header__items">
                <li class="main-header__item"><a href="#omnie">O Mnie</a></li>
                <li class="main-header__item"><a href="#przyklady">Przykładowe Teksty</a></li>
                <li class="main-header__item"><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="omnie">
            <img src="eagle.jpg" alt="">
            <p>Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
            </p>
        </div>
        <div id="przyklady">Przykładowy artykuł</div>
        <div id="Kontakt">
            <form class="form">
                <label for="name">Imie</label>
                <input id="name" type="text" placeholder="Podaj Imie">
                <label for="surname">Nazwisko</label>
                <input id="surname" type="text" placeholder="Podaj Nazwisko">
                <label for="email">Email</label>
                <input id="email" type="email" placeholder="Podaj Email">
                <label for="message">Wiadomość</label>
                <textarea rows="6" id="message" placeholder="Podaj Wiadomość"></textarea>
            </form>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

Answer 1

因为您将position: fixed;提供给.main-header。你需要padding-top作为main-header的身高{。}}。

当您向元素提供position: fixed时

元素从普通文档流中删除，没有空格   为页面布局中的元素创建。它位于相对位置   到视口
建立的初始包含块

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding-top: 51px;
}


.main-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: #0dfd8d;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
}

.main-header__logo {
    text-decoration: none;
}

.main-header__logo img {
    height: 7rem;
    vertical-align: middle;
}

.main-header__items {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-header__item {
    margin: 1rem;
}

.main-header__item a {
    text-decoration: none;
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <div class="main-header__logo">
           <a href="#"><img src="logo.png" alt="logo"></a>
        </div>
        <nav class="main-header__nav">
            <ul class="main-header__items">
                <li class="main-header__item"><a href="#omnie">O Mnie</a></li>
                <li class="main-header__item"><a href="#przyklady">Przykładowe Teksty</a></li>
                <li class="main-header__item"><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="omnie">
            <img src="eagle.jpg" alt="">
            <p>Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
            </p>
        </div>
        <div id="przyklady">Przykładowy artykuł</div>
        <div id="Kontakt">
            <form class="form">
                <label for="name">Imie</label>
                <input id="name" type="text" placeholder="Podaj Imie">
                <label for="surname">Nazwisko</label>
                <input id="surname" type="text" placeholder="Podaj Nazwisko">
                <label for="email">Email</label>
                <input id="email" type="email" placeholder="Podaj Email">
                <label for="message">Wiadomość</label>
                <textarea rows="6" id="message" placeholder="Podaj Wiadomość"></textarea>
            </form>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

显示体内弯曲

1 个答案: