顯示：內聯塊無效

Question

當這樣簡單的東西不起作用時，它是如此令人沮喪。我希望當屏幕為800px或更小時，導航將成為內聯塊。 誰能看到我做錯了什么？

我正在使用@media屏幕和（max-width：800px）也確保當CSS應該更改並且導航應該從左側使用display：block，以顯示在頂部：內聯塊（其中）不同的鏈接應該是內聯的）。

片段

 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

嘗試將“內聯塊”顯示屬性分配給列表項標記（li）而不是錨標記（a）。

有關此示例，請使用瀏覽器的“Inspect”功能檢查此Listamantic頁面，以查看用於創建內聯列表項的CSS屬性。

Answer 3

你應該申請

display：內聯塊

至

導航

而不是

導航

 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>