0

我正在尝试使用一些新的 css3 技术创建一个垂直导航菜单，但到目前为止，我只能使用display:table. 我不喜欢使用display:table/table-row/table-cell主要是因为它们将“单元格”限制为表格形式（例如，您不能将“行”或“单元格”与边距隔开），而且我也不喜欢divs仅用于制作的额外内容列表垂直。我最初走向这个方向的原因是vertical-align: middle用于文本。当我尝试使用弹性框方法时，它总是将两行文本放在同一行，我不知道如何拆分它们。

你能帮我实现同样的外观，但更灵活，最好不要额外的 div 吗？

方法的工作示例display: table（但似乎并不完全居中）：http: //jsfiddle.net/jKRDQ/

最近我使用弹性盒方法：http: //jsfiddle.net/4wSN5/

最接近没有 CSS3：http: //jsfiddle.net/6gRcp/

4

1 回答 1

3

您的 table 方法具有无效标记：只有li元素可以是ul或ol元素的子级。如果你需要额外的东西，div它必须在li.

您的 Flexbox 方法缺少box-orientation/ flex-direction。默认情况下，它设置为horizontal/ row，这使得它们都出现在一行中。您的 CSSli应该如下所示：

http://jsfiddle.net/4wSN5/1/

#slide-out-menu li {
  width: 75px;
  height: 75px;
  border: 1px solid black;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

或者，您可以保持horizontal/row方向并使用包装，但这仅适用于支持标准规范的浏览器（不包括启用了实验性 Flexbox 支持的 Firefox）。

您可能需要删除 Firefox 的前缀，因为它们的实现非常糟糕。我只包含它们是因为我的 Sass mixin 会发出它们。

如果您要使用 Flexbox，请不要单独使用 2009 规范中的属性。虽然 Opera 和 Chrome（都在 -webkit- 前缀下）同时支持旧规范和新规范（Opera 在新规范上没有前缀），但旧规范最终将被删除。

于 2013-03-16T12:33:14.290 回答