掌握HTML 和CSS 中水平選單的文字對齊方式

在製作水平選單時，實現完美的文字對齊可能是一項令人費解的任務。與純文字不同，選單項目通常受到預定義寬度的限制，因此很難在流暢的佈局中均勻地調整它們。

但不用擔心！這個看似難以捉摸的目標可以透過巧妙的技術優雅地實現。透過策略性地插入不可見的間隔元素，您可以強制行斷開並以最佳方式分佈剩餘的選單項目。

關鍵在於 justify-text 屬性，該屬性指示瀏覽器在可用區域中均勻對齊文字空間。然而，這種對齊方式通常無法滿足我們的特定要求，第一個和最後一個選單項目未對齊或間隔不理想。

我們的解決方案包括在行尾添加一個 span 元素。透過將其寬度設為 100%，我們可以有效地消耗剩餘空間，從而使前面的選單項目均勻分佈。為了保持所需的視覺效果，我們只需將其高度設為 0 來使該元素不可見。

本質上，這個無害的跨度充當佔位符，延伸到菜單的整個寬度並輕推其他菜單

通過採用這種無縫技術，您可以毫不費力地在HTML 和CSS 中建立完美對齊的水平選單，確保您的文字完美對齊，就像您對普通文字的期望一樣文字。