时间戳

首页 > 解决方案 > 列表类型消失

html - 列表类型消失

问题描述

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

<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 可见时，列表中仅缺少该项目的光盘。这里发生了什么，解决方案是什么？

标签： htmlcss

解决方案

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

list-item 的单个值将导致元素表现得像一个列表项。这可以与 list-style-type 和 list-style-position 一起使用。

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>

推荐阅读