如何在li元素的水平组中显示列表？

Question

我有一个非常长的名单li大于30项。当我在ul menu下拉列表中显示时，该列表垂直向下延伸，这要求浏览器窗口向下滚动以查看每个列表元素。

我想要做的是将列表中的每一行分组到显示3 li元素而不是每行一个在ul菜单中。

我所尝试的是将菜单使用的样式.sub-menu li设置为display: inlineas suggested here以在线显示li元素，但这对水平排序没有影响。

所以不是这样：

• 吉姆
• 简
• 杰克
• 琼斯
• 杰克逊
• 的Jhonny

它会显示这样的（其中列表中的每个三个华里要素水平分组）：

简 约翰 贾里德

吉姆 詹姆斯 琼斯

问：

如何在n个元素的水平分组中显示列表？

在我目前的设置我用这个CSS的菜单：

nav li:hover .sub-menu { 
    z-index: 2; 
    opacity: 1; 
    min-width: 100px; 
} 

.sub-menu { 
    width: 100%; 
    padding: 0px 0px; 
    position: absolute; 
    top: 100%; 
    left: 0px; 
    z-index: -1; 
    opacity: 0; 
    overflow: hidden; 
    transition: opacity linear 0.15s; 
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2); 
    background: #425563; 
    text-align: center; 
    display: inline-block; 
} 

    .sub-menu li { 
     display: inline-block; 
     font-size: 15px; 
     float: left; 
     margin-top: 0px; 
    } 

     .sub-menu li a { 
      padding: 10px 5px; 
      display: block; 
      text-decoration: none; 
      text-align: left; 
      z-index: 3; 
     } 

      .sub-menu li a:hover, .sub-menu .current-item a { 
       background: #01a982; 
       -moz-box-shadow: 0 0 5px 0px #888; 
       -webkit-box-shadow: 0 0 5px 0px #888; 
       box-shadow: 0 0 5px 0px #888; 
       color: #000; 
      } 


      .sub-menu li a input { 
       display: inline-block; 

      } 

这是使用子菜单css样式的UL名单：

   <ul class="sub-menu" id="assetNameMenu"> 
        @* li elements created in script *@ 
       </ul> 

Answer 1

花车能做到这一点相当只是。

你刚才清除浮动后，每到这个li

ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 0 1em; 
 
} 
 
li:nth-child(3n+1) { 
 
    clear: both; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
</ul>

对于inline-block存在由@phrogz

ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline; 
 
} 
 
li:nth-child(3n)::after { 
 
    content: "\A"; 
 
white-space: pre; 
 
    ; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
</ul>

在回答详述这 question一个类似的选项

Answer 2

作为替代方案，如果你不介意使用较新的CSS，你可以用flexbox做到这一点，太：

ul { 
 
    display:   flex; 
 
    list-style-type: none; 
 
    width:   300px; 
 
    flex-wrap:  wrap; 
 
} 
 

 
li { 
 
    flex: 33%; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
</ul>