Почему мой заголовок (сетка) меняет свой макет, когда применяется положение: исправлено? - PullRequest
Новая
       6

Почему мой заголовок (сетка) меняет свой макет, когда применяется положение: исправлено?

0 голосов
/ 04 марта 2020

У меня есть заголовок, который работает, как и ожидалось, пока я не применю положение: исправлено;

Я тренируюсь с сетками для завершения проекта freecodecamp начального уровня. Заголовок представляет собой сетку с двумя элементами рядом, где один перемещается в новую строку с заданной шириной. Это все, как задумано, и я понимаю, что общая отзывчивость далека от идеальной, но этого достаточно, учитывая мой уровень знаний.

Проблема: Требование состоит в том, чтобы закрепить его на вершине. Но когда я применяю положение: исправлено; к сетке (это строка 7, хотя на практике строки 7 и 8 go вместе), она выталкивает второй элемент сетки в новую строку, несмотря на то, что ширина не меняется.

Есть идеи, что здесь происходит?

Происходят и другие странные вещи, такие как контур сетки, прокручивающийся со страницы, несмотря на то, что элементы остаются зафиксированными сверху, но я не знаю, обязательно ли это является частью основного вопроса здесь. 

<html>
<head>
  <style>
    #header {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    position: fixed; /* HERE */
    top: 0; /* AND HERE */
    }

    #header-img {
    grid-area: image;
    float: left;
    max-width: 300px;
    }

    #nav-ul {
    grid-area: nav;
    list-style: none;
    float: right;
    }

    #nav-ul li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
    }
  </style>
</head>
<body>
  <header id="header">
    <div>
        <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="">
    </div>

    <nav id="nav-bar">
        <ul id="nav-ul">
            <a href=""><li class="nav-link">Features</li></a>
            <a href=""><li class="nav-link">How It Works</li></a>
            <a href=""><li class="nav-link">Pricing</li></a>
        </ul>
    </nav>
</header>
</body>
</html>

1 Ответ

0 голосов
/ 04 марта 2020

Изменить заголовок CSS свойство. См. Фрагмент. 

<html>
<head>
  <style>
    #header {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    position: fixed; /* HERE */
     /* AND HERE */
    width: 100%;
    box-sizing: border-box;
    }

    #header-img {
    grid-area: image;
    float: left;
    max-width: 300px;
    }

    #nav-ul {
    grid-area: nav;
    list-style: none;
    float: right;
    }

    #nav-ul li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
    }
  </style>
</head>
<body>
  <header id="header">
    <div>
        <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="">
    </div>

    <nav id="nav-bar">
        <ul id="nav-ul">
            <a href=""><li class="nav-link">Features</li></a>
            <a href=""><li class="nav-link">How It Works</li></a>
            <a href=""><li class="nav-link">Pricing</li></a>
        </ul>
    </nav>
</header>
</body>
</html>
...