两列菜单的 Material Design Lite 示例 - 在 Chrome 中不起作用答案

【问题标题】：Material Design Lite Example of two column menu - not working in Chrome两列菜单的 Material Design Lite 示例 - 在 Chrome 中不起作用
【发布时间】：2015-10-10 04:47:09
【问题描述】：

大家好，有没有一个示例（如果需要，可以使用 css 覆盖）来说明如何创建一个包含两列的菜单？

我正在尝试执行以下操作：

<span id="menu-lower-left" class="select-category"><span>Select a category</span></span>
      <ul class="category-list mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
          for="menu-lower-left">
        <li class="mdl-menu__item">Some Action</li>
        <li class="mdl-menu__item">Another Action</li>
        <li class="mdl-menu__item">Additional Action</li>
        <li class="mdl-menu__item">Yet Another Action</li>
      </ul>

CSS 看起来像： `

  .category-list {
    list-style-type: disc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
  }

` 当我尝试简单地添加 2 列时，它可以工作，但我的列表项消失了！

知道为什么会这样吗？这是一个演示该问题的 Plunker：

http://plnkr.co/edit/d9nNB7jg4W8nsGzdlnC4

【问题讨论】：

标签： javascript html css material-design material-design-lite

【解决方案1】：

Chrome 中似乎存在一个错误，即转换和变换可以使内容在多列布局中消失。使用来自this 答案的技巧可以修复它。这是一个更新的 Plunker： http://plnkr.co/edit/st2RmkNbcJqTVaQG3Fna?p=preview 我只需要在你的 CSS 中添加一件事

  .mdl-menu__item {
    transform: translateZ(0);
  }

【讨论】：