下拉菜單顯示爲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>