列表类型消失

Question

我正在尝试创建一个下拉菜单。

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li id="mobile"><a href="#">Mobile</a></li>
</ul>

我想在桌面上隐藏"移动"选项，只在较小的设备上显示。

li#mobile {
display: none;
}
@media screen and (max-width: 800px) {
li#mobile {
display: block;
}
}

问题是，当#mobile可见时，仅此项目的列表中缺少光盘。这里发生了什么，解决方案是什么？

Answer 1

不要使用display:block使用display:list-item

列表项的单个值将导致元素的行为类似于列表项。这可以与列表样式类型和列表样式位置一起使用。

li#mobile {
display: none;
}
@media screen and (max-width:800px) {
li#mobile {
display: list-item;
}
}

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li id="mobile"><a href="#">Mobile</a></li>
</ul>

Answer 2

您可以在媒体查询中使用display: revert。

reverseCSS关键字将属性的级联值从其当前值恢复为当前样式源对当前元素未进行更改时该属性的值。因此，如果属性从其父级继承，它会将属性重置为继承值，或者重置为用户代理的样式表(或用户样式，如果存在(建立的默认值。

li#mobile {
display: none;
}
@media screen and (max-width: 800px) {
li#mobile {
display: revert;
}
}

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li id="mobile"><a href="#">Mobile</a></li>
</ul>

Answer 3

执行相反的逻辑，您只需要设置dispay:none

@media screen and (min-width:800px) {
li#mobile {
display: none;
}
}

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li id="mobile"><a href="#">Mobile</a></li>
</ul>