Question

我正在开发一个个人项目，由于下拉菜单中包含大量元素，因此多列（准确地说是2列）可以更好地工作。我如何在Materialise CSS中完成此任务？

Answer 1

这与您的想法相似吗？它需要一些自定义CSS来删除一些填充，使列表项看起来很奇怪，但它显示两个删除列，并在较小的设备上捕捉到一个。

HTML

<div id="dropdown1" class="row dropdown-content">
  <div class="col s12 m6">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="col s12 m6">
    <ul>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</div>

<nav>
  <div class="nav-wrapper">
    <ul>
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown</a></li>
    </ul>
  </div>
</nav>

CSS

#dropdown1 div {
  padding: 0;
}

#dropdown1 li {
  text-align: center;
}

JSFiddle

如何在Materialise CSS中创建多列下拉菜单？

1 个答案: