📜  基础 CSS 下拉显式定位

📅  最后修改于: 2022-05-13 01:56:15.050000             🧑  作者: Mango

基础 CSS 下拉显式定位

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架,可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司,如 Facebook、eBay、Mozilla、Adobe,甚至迪士尼,都在使用它。该框架基于bootstrap,类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面,使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件,可以在任何设备上阅读。 Foundation for Apps 允许您构建完全响应的 Web 应用程序。

当我们单击元素时,下拉菜单用于显示内容。我们可以将任何类型的内容放在下拉列表中,并通过单击元素来访问它。 Dropdown Explicit Positioning用于设置框的位置和对齐方式。我们可以使用的位置是左、右、上和下。我们可以使用的对齐方式是上、下、左、右和居中。

下拉显式定位位置:

  • left :用于将下拉容器放置在左侧。
  • right :用于将下拉容器放置在右侧。
  • top :用于将下拉容器放置在顶部。
  • bottom :用于将下拉容器放置在底部。

下拉显式定位对齐:

  • left :用于将下拉容器相对于按钮向左对齐。
  • right :用于将下拉容器相对于按钮右对齐。
  • top :用于将下拉容器顶部相对于按钮对齐。
  • bottom :用于将下拉容器底部与按钮对齐。
  • center :用于将下拉容器中心相对于按钮对齐。

句法:

示例 1:以下代码演示了下拉显式位置TopBottom

HTML


  

  
    
  
                
      
  
    

  
    
    
        

          GeeksforGeeks         

           

          Foundation CSS Dropdown Explicit Positioning         


                                                                           



                                                                            
            


HTML


  

  
    
  
                
      
  
    

  
    
  
    

      GeeksforGeeks     

       

        Foundation CSS Dropdown Explicit Positioning     


                               

                               

                                  
        


输出:

示例 2:以下代码演示了下拉显式位置LeftRight

HTML



  

  
    
  
                
      
  
    

  
    
  
    

      GeeksforGeeks     

       

        Foundation CSS Dropdown Explicit Positioning     


                               

                               

                                  
        

输出:

参考: https://get.foundation/sites/docs/dropdown.html#explicit-positioning