為什麼我的水平清單項目無法正確顯示？

水平列表項目：故障排除和解決方案

在嘗試為網站創建水平列表時，您遇到了問題儘管應用了通常建議的解決方案，例如將“浮動”設為左側。為了診斷和解決這個問題，讓我們檢查一下提供的 HTML 和 CSS 結構。

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

<ul>

分析

提供的程式碼結構幾乎是正確的。但是，您已將“li”元素的“display”屬性設定為“inline”而不是“inline-block”。這可以防止元素水平流動。

解決方案

要建立水平列表，請將「li」元素的「display」屬性修改為「inline-」 CSS 中的「區塊」：

ul#menuItems li {
  display: inline-block;
}

透過按照建議更新CSS，您的清單項目現在將水平顯示，正如預期的那樣。

以上是為什麼我的水平清單項目無法正確顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！