我正在尝试构建适合移动设备的网站版本,为此我需要将导航栏从 display:inline 样式列表转换为元素符号列表。对于最小(不完全)工作示例,这里是 html 和 css 文件:
ul li {
display: inline;
}
@media only screen and (max-width: 600px) {
ul li {
display: block;
list-style-type: circle; /* Not doing what I want. */
}
ul {
list-style-type: circle; /* Not doing what I want either. */
}
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
这按预期工作,但移动版本缺少列表元素前面的元素符号,尽管我尝试使用 list-style-type: circle
命令强制它们进入CSS。我知道我可以在每个列表元素前面手动添加一个小圆圈,但这感觉更像是一种劣质的解决方法,而不是正确的做法。
最佳答案
list-style-*
属性仅应用于 list-item
。
当您设置 li {display: inline}
时,您禁用了 li
的默认外观。
使用 display:list-item
将其取回。
运行下面的代码片段并调整窗口大小:
li {
display: inline;
}
@media only screen and (max-width: 600px) {
li {
display: list-item;
}
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
关于html - 将导航栏从内联列表转换为移动版网站的 block 类型列表 - 缺少元素符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57025302/