我有一个电子商务项目,有一个包含很多商品的巨大菜单。为了清楚起见,子菜单的每个
li
元素必须位于另一个之下。就我而言,我的空间太大,您可以在屏幕截图中看到。
这是我的菜单
所有这些灰色标题必须一个一个地拉到另一个标题下。
我需要这样的结果。请参阅下面的屏幕截图:
这是我的代码:
<ul class="mr-auto main-menu mega-menu">
<li class="menu-item menu-item-has-children has-sub wide pos-fullwidth col-6 sub-ready">
<a href="#">Stomatološka oprema</a>
<div class="popup" style="display: block; left: -117.25px; width: 1883px; right: auto;">
<div class="inner">
<ul class="sub-menu porto-wide-sub-menu">
<li id="nav-menu-item-1137" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1" style="width: 16.6667%;"><a href="http://localhost/nova-galenaplus-wp/./stomatoloska-oprema/aparati-i-oprema-stomatoloska-oprema/">Aparati i oprema</a>
<ul class="sub-menu">
<li id="nav-menu-item-1138" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="#">Amalgamator</a></li>
etc...
</ul>
</li>
</ul>
</li>
风格
.porto-wide-sub-menu {
max-width: 100%;
display: flex;
flex-wrap: wrap;
}
.porto-wide-sub-menu>li.sub {
display: block;
position: relative;
margin: 0;
}
我尝试什么
我尝试将其放入 li 元素中以破坏列表,但不起作用。
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
display: table;
width: 100%;
padding: 0 !important;
我是一名后端开发人员,我对前端不太熟悉,尤其是CSS。如果有人可以建议我如何实现这一目标。谢谢
感谢@Johannes 的
column-count
。有了这个我就解决了这样的问题
.porto-wide-sub-menu {
max-width: 1498px;
column-count: 6;
margin: 0 auto;
column-gap: 18px;
padding: 20px;
}
.porto-wide-sub-menu>li.sub {
break-inside: avoid;
display: table;
width: 100% !important;
padding: 0 !important;
}