如何使用 HTML 和 CSS 創建完美對齊的水平選單？

使用 HTML 和 CSS 調整水平選單

在建立 HTML 選單時，水平對齊選單項目經常被忽略。要實現這種對齊可能非常具有挑戰性，需要明智地組合 HTML 和 CSS。

對齊難題

幾個障礙物使這種對齊變得複雜：

• 不同數量的選單項目需要動態解決方案。
• 對齊方式應該是最佳的，項目均勻分佈在選單列上。
• 第一個和最後一個項目應分別符合左對齊和右對齊。

簡單有效的解決方案

儘管複雜，但存在一種簡單的技術可以解決此問題：

1. 建立斷行元素：在超出剩餘空間的行尾插入元素。
2. 隱藏元素: 使用CSS 隱藏此元素，確保它不會幹擾視覺

使用span 元素的實際範例：

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

<div>

這種方法強制換行，有效地均勻分佈選單項，同時保持最佳對齊。

以上是如何使用 HTML 和 CSS 創建完美對齊的水平選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！