如何将下拉菜单的列表元素对齐彼此相邻

Question

我正在构建一个带有CSS和HTML的多级磁带，我想拥有一个下拉列表的UL列表，彼此相邻多个列。通常，下拉列表将是带有li元素的一个长列，但我想在某个边界之后将li元素包裹在列周围。你能帮我吗？

我已经尝试在UL列表上使用display: flex;，但没有任何真正可用的。

CSS

ul {
   list-style:none;
   padding: 0;
   margin: 0;
   background: #333;
}
ul li {
   display: block;
   position: relative;
   float: left;
   background: #333;
}
li ul {
   display: none;
}
ul li a {
   display: block;
   padding: 1em;
   text-decoration: none;
   white-space: nowrap;
   color: #fff;
}
.main-navigation li ul li {
   border-top: 0;
}
ul ul ul {
   left: 100%;
   top: 0;
}
ul:before, ul:after {
   display: table;
   content: "";
}
ul:after {
   clear: both;
}
li:hover > ul {
  display: block;
  position: absolute;
}
li:hover li { float: none; }

html

<ul class="main-navigation">
   <li>
      <ul>
         <li><a href="#">First Link</a></li>
         <li><a href="#">Dropdown</a>
            <ul>
               <li><a href="#">column1</a></li>
               <li><a href="#">column1</a></li>
               <li><a href="#">column1</a></li>
               <li><a href="#">column2</a></li>
               <li><a href="#">column2</a></li>
               <li><a href="#">column2</a></li>
               <li><a href="#">column3</a></li>
               <li><a href="#">column3</a></li>
               <li><a href="#">column3</a></li>
            </ul>
         </li>
         <li><a href="#">Second Link</a></li>
      </ul>
   </li>
</ul>

Answer 1

使用 column-count

列计数CSS属性将元素的内容分解为指定的列数。

mdn

ul.col {
  column-count: 3;
}

<ul class="col">
  <li><a href="#">column1</a></li>
  <li><a href="#">column1</a></li>
  <li><a href="#">column1</a></li>
  <li><a href="#">column2</a></li>
  <li><a href="#">column2</a></li>
  <li><a href="#">column2</a></li>
  <li><a href="#">column3</a></li>
  <li><a href="#">column3</a></li>
  <li><a href="#">column3</a></li>
</ul>