建立水平清單項目
嘗試建立水平清單時，可能會遇到清單項目不水準對齊的問題。為了解決這個問題，這裡有一個簡化的解決方案：
問題：
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中文網其他相關文章！
