Question

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

HTML：

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

CSS（移动）：

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

响应CSS（桌面）：

.about nav ul li {
    clear: both;
  }

我试图清除列表项的两边以尝试使列表项垂直，但显然没有用。

Answer 1

检查

http://jsfiddle.net/ronansmith/vqk68ucu/

您应该将<a>放在＆lt; li>内，而不是现在的方式。 Cuz <li>始终遵循<ul>

水平到垂直列表而不删除显示：内联/内联块

1 个答案: