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

Question

你在HTML中的菜单栏上找到了很多教程,但是对于这个特定的(虽然是IMHO泛型)案例,我还没有找到任何合适的解决方案:

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

• 有不同数量的纯文本菜单项,页面布局流畅.
• 第一个菜单项应左对齐,最后一个菜单项应右对齐.
• 其余项目应在菜单栏上以最佳方式传播.
• 数量是变化的,因此没有机会预先计算最佳宽度.

请注意,TABLE也不适用于此:

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

使用HTML和CSS以干净的方式实现这一点并不是很奇怪吗？

Answer 1

最简单的方法是通过在行的末尾插入一个元素来强制线断开,该元素将占用多于左边的可用空间然后隐藏它.我很容易用一个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你的用例和设计的宽度,但我希望你得到一般的想法,并可以适应它.

Answer 2

现代方法 - Flexboxes!

既然CSS3 flexboxs有更好的浏览器支持,我们中的一些人终于可以开始使用它们了.只需添加额外的供应商前缀为更多的浏览器覆盖面.

在这种情况下,您只需将父元素设置display为flex,然后将justify-content属性更改为space-between或者space-around为了在子Flexbox项之间或周围添加空间.

使用justify-content: space-between - (这里的例子):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

使用justify-content: space-around - (这里的例子):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

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>

之所以我有一个标签inline-block是因为我不希望里面的单词也是合理的,我也不想使用非破坏空格.

Answer 4

有一个解决方案.适用于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>