ねえみんな、2 つの列を持つメニューを作成する方法の例 (必要に応じて 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 つの列を追加しようとすると、うまくいきますが、リスト項目が消えてしまいます!
なぜこれが起こっているのですか？問題を示すプランカーを次に示します。