媒体查询不应用 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/

Answer 2

您应该使用移动优先的方法来设置媒体查询。另外，请确保.navitem 的display 属性未设置为inline，否则您将无法对其应用宽度。

.display .navitem {
  border: 1px solid #ccc;
  color: blue;
  display: inline-block;
  width: 100%;
}

.float .navitem {
  border: 1px solid #ccc;
  color: blue;
  float: left;
  width: 100%;
}

@media screen and (min-width: 800px) {
  .display .navitem,
  .float .navitem {
    color: black;
    width: 25%;
  }
}