如何删除ul li元素之间的空白

Question

我有一个电子商务项目，有一个包含很多商品的巨大菜单。为了清楚起见，子菜单的每个

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。如果有人可以建议我如何实现这一目标。谢谢

Answer 1

感谢@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;
     
}