📜  如何以 n 列格式显示列表?

📅  最后修改于: 2021-11-03 10:13:42             🧑  作者: Mango

我们可以通过两种方式在 n 列格式中显示列表:

  1. 在列表中使用浮动
  2. 在列表中使用列数
在列表中使用浮动:通过使用浮动,我们可以使列表向左浮动,即它后面的下一个项目将显示在左边。因此,这里我们将 ol 的大小设置为 30em,将一个列表项的大小设置为 10em,这样一行中只能容纳 3 个项并形成三列。要获得所需的列数,您可以相应地设置 ol 的大小和一项的大小。

示例 1:



  

    
    
        How to display a list in
        n columns format?    
    
      
    
    

  

    
    

Geeks For Geeks

    
        
            
                    
  1. Geek 1
  2.                 
  3. Geek 2
  4.                 
  5. Geek 3
  6.                 
  7. Geek 4
  8.                 
  9. Geek 5
  10.                 
  11. Geek 6
  12.                 
  13. Geek 7
  14.                 
  15. Geek 8
  16.                 
  17. Geek 9
  18.                 
  19. Geek 10
  20.                 
  21. Geek 11
  22.                 
  23. Geek 12
  24.             
        
    
  

输出:

在列表中使用列数: CSS 中的列数可帮助您决定输出中所需的列数。它的值可以是任何正整数。这里的示例具有两个不同的 n 值(n = 6, n = 4)。

示例 2:



      

    
      
    
        How to display a list in
        n columns format?
    
      
    
    

  

    
    

Geeks For Geeks

       
                            
                
  1. Geek 1
  2.             
  3. Geek 2
  4.             
  5. Geek 3
  6.             
  7. Geek 4
  8.             
  9. Geek 5
  10.             
  11. Geek 6
  12.             
  13. Geek 7
  14.             
  15. Geek 8
  16.             
  17. Geek 9
  18.             
  19. Geek 10
  20.             
  21. Geek 11
  22.             
  23. Geek 12
  24.         
                            
                
  1. Geek 1
  2.             
  3. Geek 2
  4.             
  5. Geek 3
  6.             
  7. Geek 4
  8.             
  9. Geek 5
  10.             
  11. Geek 6
  12.             
  13. Geek 7
  14.             
  15. Geek 8
  16.             
  17. Geek 9
  18.             
  19. Geek 10
  20.             
  21. Geek 11
  22.             
  23. Geek 12
  24.         
    
  

输出: