如何在 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;
}

此解决方案有效证明了合理性菜单项无需预先计算或额外标记。