下拉菜单显示为2×2而不是1×4下拉HTML

Question

这里是我想分成2×2的位。

 <li class="divider"></li> 
       <li class="dropdown-submenu"> 
      <a tabindex="-1" href="#"><b>Sticks</b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#"><b>Composite Hockey Sticks</b></a></li> 
       <li><a href="#">Senior</a></li> 
       <li><a href="#">Intermediate</a></li> 
       <li><a href="#">Junior</a></li> 
        <li><a href="#">Youth</a></li> 

      </ul> 
      </li> 

Answer 1

如果您希望在不更改标记的情况下以2列显示下拉菜单，则可以使用css列。

.dropdown-menu { 
 
    column-count: 2; 
 
}

<li class="divider"></li> 
 
<li class="dropdown-submenu"> 
 
    <a tabindex="-1" href="#"><b>Sticks</b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><b>Composite Hockey Sticks</b></a></li> 
 
    <li><a href="#">Senior</a></li> 
 
    <li><a href="#">Intermediate</a></li> 
 
    <li><a href="#">Junior</a></li> 
 
    <li><a href="#">Youth</a></li> 
 
    </ul> 
 
</li>

您也可以使li的inline-block，删除元素之间的空白，使他们width: 50%所以你创建2列

.dropdown-menu li { 
 
    width: 50%; 
 
    display: inline-block; 
 
}

<li class="divider"></li> 
 
<li class="dropdown-submenu"> 
 
    <a tabindex="-1" href="#"><b>Sticks</b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><b>Composite Hockey Sticks</b></a></li><li><a href="#">Senior</a></li><li><a href="#">Intermediate</a></li><li><a href="#">Junior</a></li><li><a href="#">Youth</a></li> 
 
    </ul> 
 
</li>

或者你可以使用Flexbox的与flex-wrap和设置在li的width: 50%;创建2列

.dropdown-menu { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.dropdown-menu li { 
 
    width: 50%; 
 
}

<li class="divider"></li> 
 
<li class="dropdown-submenu"> 
 
    <a tabindex="-1" href="#"><b>Sticks</b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><b>Composite Hockey Sticks</b></a></li><li><a href="#">Senior</a></li><li><a href="#">Intermediate</a></li><li><a href="#">Junior</a></li><li><a href="#">Youth</a></li> 
 
    </ul> 
 
</li>