如果在CSS中导航栏

Question

当div中的内联元素出现在多行上时，我需要删除一行代码，但我不知道该怎么做

此页

<style>
body {
    background-color: black;
}
#nav {
    color: #fff;
    border: 4px solid white;
    background: #000;
    text-align: center;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    /*if goes on multiple rows, remove 'display:inline-block'*/
    display: inline-block;
}
li a {
    color: white;
    display: block;
    padding: 2.5px 6px;
}
li a:hover {
    color: black;
    background-color: white;
}
#active {
    text-decoration: none;
    background-color: white;
    color: black;
    pointer-events: none;
    cursor: default;
}
</style>
<nav id="nav">
<ul>
<li><a href="i" id="active">Home</a></li><li><a href="">Page1</a></li><li><a href="">Wow</a></li><li><a href="">Asdfgh</a></li><li><a href="">Test</a></li><li><a href="">CSS</a></li>
</ul>
</nav>

何时调整大小，应该是这样的：

我该怎么做？ 提前致谢

Answer 1

您应该使用media query。

这将允许您对特定的屏幕宽度范围使用特定的CSS规则。

因此，在确定宽度之后，您希望li项目以这种方式显示，只需写下

@media (max-width: <some number>px) {
  li {
    display: block;
    width: 100%;
  }
}

小提琴： https://jsfiddle.net/mkarajohn/vb16d46j/

只需调整结果窗格的大小即可查看其效果。