语义 UI 列表浮动内容变体

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 使我们的网站看起来漂亮且响应迅速。它具有预定义的类，例如引导程序，用于使我们的网站更具交互性。它有一些预先构建的语义组件，我们可以使用这些组件来创建响应式网站。

Semantic UI List用于对相关内容进行分组。这是一种显示我们网站多次需要的项目列表的简单方法。列表浮动内容变体用于将元素浮动在左侧或右侧。

在本文中，我们将讨论 Semantic UI List 浮动内容变化。

Semantic-UI List 浮动内容变体类：

• left floated：该类用于使内容在左侧浮动。
• right floated：该类用于使内容向右浮动。

句法：

      ...

示例 1：以下代码演示了 Semantic-UI 列表左浮动内容变体。

HTML

  

  
  

  

    

        
 GeeksforGeeks 
  
        
 Semantic-UI List Floated Content Variation 
    
 

  
    

        

          
  
          

            
              Left floated Button
            
          
        
  
        

          
            Button
          
          
            Left floated Button
          
        
   

输出：

左浮动内容变化

示例 2：以下代码演示了 Semantic-UI 列表右浮动内容变体。

HTML

  

  
  

  

    

        
 GeeksforGeeks 
  
        
 Semantic-UI List Floated Content Variation 
    
 

  
    

         
          GFG Right floated 1
        
         
          GFG Right floated 2
        
         
          GFG Right floated 3
        
    
  
    

         
          GFG Item 1 
        
         
          GFG Item 2 
        
         
          GFG Item 3
         
         
          GFG Item 4 
        
    

输出：

右浮动内容变体

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