Flexbox导航中的全宽背景

Question

我有一个nav元素，其中包含无序列表和多个项目。我正在使用Flexbox来确保项目和媒体查询帐户之间有足够的宽度。但是，我的背景颜色属性不会跨越导航栏的整个宽度/高度。我是否需要在不同的元素上设置这些属性？

nav {
  background-color: #dddddd;
  & ul {
    display: flex;
    width: 100%;
    list-style-type: none;
    & li {
      flex-grow: 1;
      flex-shrink: 1 auto;
      flex-basis: 100%;
    }
    & li a {
      text-decoration: none;
    }
  }
}

<nav> 
  <ul>
    <li><a href="/1">First</a></li>
    <li><a href="/2">Second</a></li>
    <li><a href="/3">Third</a></li>
  <ul>
</nav>

Answer 1

第一。使用</ul>

关闭您的ul

第二。你在谈论左右边距吗？默认情况下，正文具有8px的余量。

如果你添加它将删除它：

body {
  margin: 0;
}

另外，我将你的SASS编译为CSS，只是在这里展示了这个例子。

以下内容对于理解每个HTML元素的默认CSS值非常有用。

  

HTML元素的默认CSS值

     

https://www.w3schools.com/cssref/css_default_values.asp

＆＃13;

＆＃13;

body {
  margin: 0;
}

nav {
  background-color: #dddddd;
}

nav ul {
  display: flex;
  width: 100%;
  list-style-type: none;
}

nav ul li {
  flex-grow: 1;
  flex-shrink: 1 auto;
  flex-basis: 100%;
}

nav ul li a {
  text-decoration: none;
}

＆＃13;

<nav>
  <ul>
    <li><a href="/1">First</a></li>
    <li><a href="/2">Second</a></li>
    <li><a href="/3">Third</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;