jquery - 如果在导航栏的 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%;
  }
}

fiddle : https://jsfiddle.net/mkarajohn/vb16d46j/

只需调整结果 Pane 的大小即可查看效果。