如何在 HTML 和 CSS 中完美對齊水平純文字選單？

在HTML CSS 中證明水平選單的合理性：綜合解決方案

儘管HTML 中的選單列教學很多，但為純文字選單實現最佳的合理性仍然是一個挑戰。本文將提出一個強大的解決方案，確保正確對齊、最佳間距和不同選單項目數量的靈活性。

理解問題

目標是建立一個水平選單，其中：

• 第一項左對齊
• 最後一項是右對齊
• 剩餘項目均勻分佈在選單列上
• 此解決方案應該適用於不同數量的項目，而無需預先計算最佳寬度

隱形擴展跨度

實現這一理由的關鍵是在菜單末尾插入一個不可見的元素，強制換行。透過策略性地隱藏此元素，我們可以為最佳項目分佈創建必要的空間。

以下是最佳 CSS 和 HTML 程式碼：

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

<div>
<h3 id="工作原理">工作原理</h3>
<ol>
<li>#menu 設定整個選單的對齊方式。 </li>
<li>#menu * 確保所有子元素是內聯元素。 </li>
<li>#menu li 使選單項目成為內聯塊，允許它們水平流動。 </li>
<li>隱藏的跨度（#menu span）擴展以填充剩餘空間，迫使換行並使選單正確對齊。 </li>
</ol>
<p>此解決方案提供了一種優雅且有效的方法來在 HTML CSS 中建立對齊的水平選單，無論選單項目有多少，都確保最佳的間距和對齊。 </p>
</div>

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