我如何*真正*证明 HTML+CSS 中的水平菜单？

Question

你可以在 HTML 中找到很多关于菜单栏的教程，但是对于这个特定的（尽管恕我直言是通用的）案例，我还没有找到任何合适的解决方案：

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

• 纯文本菜单项数量不等，页面布局流畅。
• 第一个菜单项应左对齐，最后一个菜单项应右对齐。
• 其余项目应以最佳方式分布在菜单栏上。
• 数量不同，因此无法预先计算出最佳宽度。

请注意，TABLE 在这里也不起作用：

• 如果将所有 TD 居中，则第一项和最后一项未正确对齐。
• 如果您左对齐和右对齐第一个 resp。最后的项目，间距将是次优的。

没有明显的方法通过使用 HTML 和 CSS 以干净的方式实现这一点，这不是很奇怪吗？

Answer 1

另一种解决方案。我没有选择像添加区分类等处理html，所以我找到了一种纯css方式。

适用于 Chrome、Firefox、Safari..不了解 IE。

测试：http://jsfiddle.net/c2crP/1

ul {
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 200px; 
  text-align: justify; 
  list-style-type: none;
}
ul > li {
  display: inline; 
  text-align: justify; 
}

/* declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn't know where to make a break. */
ul > li:after {
  content: ' '; 
  display: inline;
}

/* notice the 'inline-block'! Otherwise won't work for webkit which puts after pseudo el inside of it's parent instead of after thus shifting also the parent on next line! */
ul > li:last-child:after {
  display: inline-block;
  margin-left: 100%; 
  content: ' ';
}

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">exposities</a></li>
  <li><a href="#">werk</a></li>
  <li><a href="#">statement</a></li>
  <li><a href="#">contact</a></li>
</ul>

Answer 2

找到了解决办法。适用于FF、IE6、IE7、Webkit等。

确保在关闭 span.inner 之前没有添加任何空格。 IE6 会崩溃。

您可以选择给.outer 一个宽度

.outer {
  text-align: justify;
}
.outer span.finish {
  display: inline-block;
  width: 100%;
}
.outer span.inner {
  display: inline-block;
  white-space: nowrap;
}

<div class="outer">
  <span class="inner">THE MENU ITEMS</span>
  <span class="inner">SHOULD BE</span>
  <span class="inner">JUSTIFIED</span>
  <span class="inner">JUST AS</span>
  <span class="inner">PLAIN TEXT</span>
  <span class="inner">WOULD BE</span>
  <span class="finish"></span>
</div>

Answer 3

好的，这个解决方案在IE6/7上不起作用，因为缺少:before/:after的支持，但是：

ul {
  text-align: justify;
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
ul:after {
  content: "";
  margin-left: 100%;
}
li {
  display: inline;
}
a {
  display: inline-block;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
  </ul>
</div>

我之所以将a标记为inline-block是因为我不希望里面的单词也被证明是合理的，我也不想使用不间断的空格。

Answer 4

最简单的做法是强制换行，方法是在行尾插入一个占用超过剩余可用空间的元素，然后将其隐藏。我用一个简单的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 id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

#menu span 选择器中的所有垃圾都是（据我发现的）大多数浏览器所必需的。它应该强制 span 元素的宽度为 100%，这应该会导致换行，因为由于 display: inline-block 规则，它被视为内联元素。 inline-block 还使 span 可以使用块级样式规则，例如 width，这会导致元素不符合菜单，从而导致菜单换行。

您当然需要根据您的用例和设计调整span 的宽度，但我希望您能大致了解并适应它。