如何在 HTML CSS 中調整水平選單？

在HTML CSS 中調整水平選單：權威指南

調整水平選單列是一項看似微不足道的任務，但找到一個乾淨的功能表列適應不同內容的靈活解決方案非常具有挑戰性。

問題

為了真正證明選單的合理性，每個項目的位置都應該像文字在一行上一樣。這意味著左對齊第一個項目，右對齊最後一個項目，並將其餘項目均勻分佈在兩者之間。

挑戰

• 使用表格有問題，因為當單元格居中或時，它無法正確對齊第一項和最後一項左/右對齊。
• 由於項目數量不同，計算每個選單項目的最佳寬度是不可行的。

解決方案

最直接的方法是透過引入一個在視覺上佔據剩餘空間的元素然後隱藏它來強制換行。 span 元素非常適合此操作：

HTML

<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

CSS

此解決方案有效地證明了這一點選單項目無需預先計算或額外標記。