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