媒体查询未应用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%;
  }
}