如何在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>