Html 在不删除显示的情况下使水平列表变为垂直列表：内联/内联块

我正在尝试为所有带有Html/Css的设备创建一个流畅的网站。如果不删除显示属性，我无法找到使导航水平的方法。我无法找到将导航项恢复为垂直形式的方法这是我的代码：

HTML:

响应式CSS（桌面）：

我试图清除列表项的两侧以使列表项垂直，但显然不起作用。

检查此项

---

你应该把

放在里面，而不是现在这样做。因为

总是遵循

你能做一个片段吗？我试过
标签，它们只会弄乱移动版本。除了无效的HTML代码（以及使用

br

元素，你应该使用CSS来指定边距/填充）–如果要实现不同的格式设置，为什么不更改CSS属性值？这毫无意义。

<nav>
        <ul>
          <a href="index.html"> <li>HOME</li></a>
          <br>
          <br>
          <a href="lessons.html"><li>LESSONS</li></a>
          <br>
        </ul>
     </nav>

nav ul li {
  background-color:#0066FF;
  text-align:center;
  padding:10px;
  color: #fff; 
  margin: 0 0 2px 0;
  display: inline-block;
}

.about nav ul li {
    clear: both;
  }