嘿,伙计们,有没有一个例子(如果需要的话用 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:
最佳答案
Chrome 中似乎存在一个错误,过渡和转换会使多列布局中的内容消失。使用 this 中的技巧答案修复它。这是一个更新的 Plunker: http://plnkr.co/edit/st2RmkNbcJqTVaQG3Fna?p=preview 我只需要向您的 CSS 添加一件事
.mdl-menu__item {
transform: translateZ(0);
}
关于javascript - 两列菜单的 Material Design Lite 示例 - 在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31527063/