Question

我正在尝试使用一些新的css3技术创建一个垂直导航菜单，但到目前为止，我只能使用display:table最接近所需的外观。我不喜欢使用display:table/table-row/table-cell主要是因为它们将“单元格”限制为表格形式（例如，您不能将“行”或“单元格”用空格分隔）并且我也不喜欢额外{ {1}}仅用于使列表垂直。我最初这个方向的原因是使用divs作为文本。当我尝试使用弹性盒方法时，它会将两行文本放在同一行，我无法弄清楚如何拆分它们。

你能帮助我实现相同的外观，但更灵活，最好没有额外的div？

vertical-align: middle方法的工作示例（虽然看起来并不完全居中）：http://jsfiddle.net/jKRDQ/

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

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

Answer 1

您的表格方法标记无效：只有li元素可以是ul或ol元素的子元素。如果您需要额外的div，则必须在 li内。

您的Flexbox方法遗失box-orientation / flex-direction。通过defult，它被设置为horizontal / row，这使得它们全部出现在一行中。您li的CSS应如下所示：

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 mixins发出它们。

如果您要使用Flexbox，永远不会自行使用2009规范中的属性。虽然Opera和Chrome（都在-webkit-前缀下）支持旧规格和新规格（Opera在新规格上没有固定），但旧的规格最终会被删除。

改进这个CSS3并实现相同的效果 - flexbox垂直对齐文本

1 个答案: