嵌套列表对齐问题

Question

我的下拉菜单中有一个下拉菜单（全角），有一个嵌套列表，我希望每列的高度和宽度均相等。我试图在每个列中添加一个容器，然后将display：table-cell;但似乎我的代码根本不起作用。可以帮我吗？

                    <div class="column">
                            <div class="col-container">
                                <ul id="sub-list">
                                    <li class="sub-list-item">
                                        <a class="sub-list-title">창업 프로세스</a>
                                    </li>
                                    <li class="nested-child">
                                        <ul class="sub-sub-list">
                                            <li class="item"><a class="sub-sub-title">경진대회정보</a></li>
                                            <li class="item"><a class="sub-sub-title">명예의 전당</a></li>
                                        </ul>   
                                    </li>
                                    <li class="sub-list-item">
                                        <a class="sub-list-title">행사 네트워크</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

style.scss的片段

.column{
   float: left;
   margin: 0;
   display: table;
    .col-container{
    display: table-cell;
    background: yellow;
    padding: 21px;
    }
 }

我将提供输出内容的照片。

这是使用嵌套UL进行的。我们如何实现这一目标？

Answer 1

您可以更改flex-basis值来调整要显示的列数，希望您找到了所需的解决方案。

Refer flexbox:

ul,
li {
  margin: 0;
  padding: 0;
}

.list-item-main {
  display: flex;
  flex-wrap: wrap;
}

.list-item-main>.list-item {
  list-style: none;
  flex-basis: 33%;
  box-sizing: border-box;
  padding: 15px;
}

.list-item-main>.list-item .nested-ul>li {
  list-style: none;
  box-sizing: border-box;
  padding: 0 15px;
}

.list-item-main .list-item-head {
  background: gold;
}

<div class="list-container">
  <ul class="list-item-main">
    <li class="list-item">
      <a>Single List item</a>
    </li>
    <li class="list-item">
      <ul class="nested-ul">
        <li class="list-item-head">nested list 1 item</li>
        <li class="list-item">nested list 1 item</li>
        <li class="list-item">nested list 1 item</li>
        <li class="list-item">nested list 1 item</li>
      </ul>
    </li>
    <li class="list-item">
      <ul class="nested-ul">
        <li class="list-item-head">nested list 2 item</li>
        <li class="list-item">nested list 2 item</li>
        <li class="list-item">nested list 2 item</li>
        <li class="list-item">nested list 2 item</li>
      </ul>
    </li>
    <li class="list-item">
      <ul class="nested-ul">
        <li class="list-item-head">nested list 3 item</li>
        <li class="list-item">nested list 3 item</li>
        <li class="list-item">nested list 3 item</li>
        <li class="list-item">nested list 3 item</li>
      </ul>
    </li>
    <li class="list-item">
      <ul class="nested-ul">
        <li class="list-item-head">nested list 4 item</li>
        <li class="list-item">nested list 4 item</li>
        <li class="list-item">nested list 4 item</li>
        <li class="list-item">nested list 4 item</li>
      </ul>
    </li>
  </ul>
</div>