Как выровнять элементы списка раскрывающегося меню рядом друг с другом - PullRequest
Новая
       20

Как выровнять элементы списка раскрывающегося меню рядом друг с другом

1 голос
/ 09 июля 2019

Я строю многоуровневую навигационную панель с CSS и HTML, и я хочу иметь раскрывающийся список ul с несколькими столбцами рядом друг с другом. Обычно раскрывающийся список представляет собой один длинный столбец с элементами li, но я хочу обернуть элементы li вокруг столбца после определенной границы. Вы можете мне помочь?

Я пытался работать с display: flex; в ul-list, но на самом деле ничего не получалось.

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>

1 Ответ

2 голосов
/ 09 июля 2019

Использование 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>
...