无法在外部样式表中实现flex-wrap、grid

Question

--

我有一个作业提供来自 HTML 页面和外部 CSS 样式表的代码，并且我不应该更改 HTML 代码或创建任何新的样式表选择器，只需将属性：值添加到已有的内容中。

我看到的所有使用网格框、将导航栏从垂直更改为水平等的示例都使用了一堆 div，但这些尚未在 HTML 代码中使用。如何在不使用 div 的情况下更改选择器以实现 flex-wrap 和网格选项？

HTML 示例：

  <nav>
    <ul>
      <li>
        <a href="">Home</a>
      </li>
      <li>
        <a href="">Blog</a>
      </li>
      <li>
        <a href="">About us</a>
      </li>
      <li>
        <a href="">Our history</a>
      </li>
      <li>
        <a href="">Contacts</a>
      </li>
    </ul>
  </nav>

CSS 示例：

  nav {
    background-color: #000;
    padding: .5em;
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }

一项作业指令示例：

--导航栏应随内容一起滚动，然后在到达视口顶部时卡在该位置。

我知道我需要在某个地方使用“position:sticky”，但是如果我只是将它放在“nav {”选择器下，它就不起作用。与 Flexbox、Grid 的类似尝试相同...

Answer 1

使用

position: sticky

时，您还需要定义它应该粘在哪里。如果您想将其粘贴在最顶部并保留在那里，请记住包含

top: 0;

。

  nav {
    background-color: #000;
    padding: .5em;
    position: sticky;
    top: 0;
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }

<main>
  <div>Block of text</div>
    <nav>
    <ul>
      <li>
        <a href="">Home</a>
      </li>
      <li>
        <a href="">Blog</a>
      </li>
      <li>
        <a href="">About us</a>
      </li>
      <li>
        <a href="">Our history</a>
      </li>
      <li>
        <a href="">Contacts</a>
      </li>
    </ul>
  </nav>
  <div style="height: 100vh;"></div>
</main>