html - 媒体查询不应用 div 的宽度

Question

我正在尝试使用 display:inline-block 和 float:left 方法制作全宽水平菜单。一切正常，除了媒体查询没有应用 width:100% 声明。尽管应用了测试颜色，但它表明媒体查询正在运行。

HTML 文档中的相关部分

<nav class="display">
  <!-- Weird comments to prevent space between elements -->
  <div class="navitem">Section 1</div><!--
  --><div class="navitem">Section 2</div><!--
  --><div class="navitem">Section 3</div><!--
  --><div class="navitem">Section 4</div>
</nav>

<nav class="float">
  <div class="navitem">Section 1</div>
  <div class="navitem">Section 2</div>
  <div class="navitem">Section 3</div>
  <div class="navitem">Section 4</div>
</nav>

样式表中的相关部分

.display .navitem {
  display: inline-block;
  width: 25%;
}

.float .navitem {
  float: left;
  width: 25%;
}

.float::after {
  clear: left;
  content: "";
  display: table;
}

@media screen and (max-width:800px) {
  .navitem {
    width: 100%;
    color: blue;
  }
}

我已经试了一个小时了，就是想不通为什么宽度不会改变。我错过了什么？

完整代码:jsfiddle.net

Answer 1

你可以使用 display:flex

html

  <nav>
    <div>Section 1</div>
    <div>Section 2</div>
    <div>Section 3</div>
    <div>Section 4</div>
  </nav>

CSS

nav > div {
  flex: none;
  color: black;
}

@media screen and (min-width:800px) {

  nav {
    display: flex;
  }

  nav > div {
    flex: 1;
    color: blue;
  }
}

https://jsfiddle.net/z7w2ms34/