Material Design Lite两列菜单示例 - 在Chrome中无效

时间:2015-07-20 21:59:12

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

嘿伙计们有一个例子(如果需要的话有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列时,它可以工作,但我的列表项目消失了!

enter image description here

知道为什么会这样吗?这是一个演示问题的Plunker:

http://plnkr.co/edit/d9nNB7jg4W8nsGzdlnC4

1 个答案:

答案 0 :(得分:1)

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

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