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

您应该使用移动设备优先的方法来设置媒体查询。另外，请确保 .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%;
  }
}

Answer 2

您可以使用 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/

div 的宽度未被媒体查询应用

Width of div is not applied by media query

html

css

width

css-float