显示：内联块无效

Question

当这样简单的东西无法工作时，这是非常令人沮丧的。当屏幕为800px或更小时，我希望导航为内嵌块。谁能看到我做错了什么？

我正在使用@media屏幕和（max-width：800px）确保CSS应该更改并且导航应该从左侧使用display：block，以显示在顶部：inline块（不同链接应该是内联的）。

段

nav {
  clear: left;
  text-decoration: none;
  float: left;
  width: 18%;
}
nav ul {
  list-style-type: none;
  margin-left: -40px;
}
nav a {
  text-decoration: none;
  color: black;
  padding: 10px;
  border: 1px solid brown;
  display: inline-block;
  width: 90%;
}
@media screen and (max-width: 800px) {
  nav {
    width: 100%;
    border: 1px solid pink;
  }
  nav a {
    float: none;
    display: inline-block;
    width: 20%;
  }
}

<nav>
  <ul>
    <li>
      <a href="index.html">home</a>
    </li>
    <li>
      <a href="contact.html">contavt</a>
    </li>
  </ul>
</nav>

Answer 1

在这里没有浮动

 nav
 {
  width: 100%;
  border: 1px solid pink;
  float: none;
 }

Answer 2

尝试将“inline-block”显示属性分配给列表项标签（li）而不是锚标签（a）。

有关此示例，请使用浏览器的“检查”功能检查此Listamantic页面，以查看用于创建内联列表项的CSS属性。

Answer 3

你应该申请

display：inline-block

到

nav li

而不是

导航

nav
{
 clear: left;
 text-decoration: none;
 float: left;
 width: 18%;
}

nav ul
{
 list-style-type: none;
 margin-left: -40px;
}

nav a
{
 text-decoration: none;
 color: black;
 padding: 10px;
 border: 1px solid brown;
 display: inline-block;
 width: 90%;
}

@media screen and (max-width: 800px)
{
 nav
 {
  width: 100%;
  border: 1px solid pink;
 }

 nav li
 {
  float: none;
  display: inline-block;
  width: 20%;
 }
}

<nav>
  <ul>
    <li>
      <a href="index.html">home</a>
    </li>
    <li>
      <a href="contact.html">contavt</a>
    </li>
  </ul>
</nav>