首頁 >web前端 >css教學 >如何在 CSS 中創建真正的水平列表?

如何在 CSS 中創建真正的水平列表?

Susan Sarandon
Susan Sarandon原創
2024-12-04 01:23:10793瀏覽

How to Create a Truly Horizontal List in CSS?

建立水平清單項目

嘗試建立水平清單時,可能會遇到清單項目不水準對齊的問題。為了解決這個問題,這裡有一個簡化的解決方案:

問題:

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

使用display: inline 和自動邊距不會產生預期的結果。

解決方案:

ul > li {
    display: inline-block;
}

透過對列表項目使用 display: inline-block ,它們將表現為水平流中的單獨區塊。這可確保每個項目都包裹其內容並水平對齊。

以下是更新的程式碼片段:

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  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>

以上是如何在 CSS 中創建真正的水平列表?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn