Semantic-UI 列表内容变化

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。

Semantic-UI 列表为我们提供了列表的不同变体，例如水平、倒置、选择、动画、松弛、分割、单元格和大小变体。在这里，我们将了解Semantic-UI List Content Variations用于显示内容的对齐和浮动。

Semantic-UI 列表内容变化：

• Vertically Aligned：用于设置列表元素的垂直对齐方式。
• Floated：用于设置列表元素的浮点数。

Semantic-UI 列表垂直对齐的内容变体使用的类：

• 顶部对齐：该类用于显示列表元素的顶部对齐。
• 中间对齐：该类用于显示列表元素的中间对齐。
• 底部对齐：该类用于显示列表元素的底部对齐方式。

Semantic-UI 列表浮动内容变体使用的类：

• 左浮动：该类用于设置列表元素的左浮动。
• 右浮动：该类用于设置列表元素的右浮动。

句法：

// Syntax for Vertically Aligned Content Variation

       Top Aligned


// Syntax for Floated Content Variation
div class="right floated content">
    Right floated content

示例 1：在此示例中，我们将描述 List Vertically Aligned Content Variation 的使用。

HTML

  

    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Semantic-UI List Vertically Aligned Content Variation
  
        

            

                
                

                    GeeksforGeeks
                
            
            

                
                

                    Data Structure
                
            
            

                
                

                    Algorithm
                
            
        
    

  

输出：

示例 2：在此示例中，我们将描述列表浮动内容变体的使用。

HTML

  

    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Semantic-UI List Floated Content Variation
    
  
    

        

            
            
                GeeksforGeeks
            
        
        

            
            
                Data Structure
            
        
        

            
            
                Algorithm
            
        
    

  

输出：

参考： https://semantic-ui.com/elements/list.html