"List-style : none" 和 "display : inline block"

Question

如果我不使用“列表样式：none”可以吗，因为在制作水平导航栏时，设置“显示：内联块”，项目符号本身消失了。如果不是，为什么？

HTML:

        <nav>
            <ul class="horizontal-list">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skill">Skills</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#Education">Education</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

CSS:

nav li{
    /* list-style:none;  Why should i use this in this case?*/
    margin:15px 15px;
    color: white;
    display:inline-block;
}

Answer 1

如果您选择的属性在视觉上没有任何影响，下一步就是考虑语义和可访问性。

显然，Safari list-style:none 有问题。它们不会被添加到可访问性树中，这可能会导致使用屏幕阅读器阅读内容时出现问题。这就是 link 建议的解决此问题的方法。

ul {
  list-style: none;
}

ul li::before {
  content: "0B";
}

"List-style : none" 和 "display : inline block"

"List-style : none" and "display : inline block"

html

css

html-lists

navbar

display