基础 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：以下代码演示了下拉显式位置Top和Bottom 。

HTML

  

  
    
  
                
      
    
  
    
    

  
    
    
        
          GeeksforGeeks
        
  
        
          Foundation CSS Dropdown Explicit Positioning
        
      
        
          Bottom Left
        
  
        
          
              GeeksforGeeks
          
        
  
        
          Bottom Center
        
  
        
          
              GeeksforGeeks
          
        
  
        
          Bottom Right
        
  
        
          
              GeeksforGeeks
          
        
  
        
          Top Left
        
  
        
        
            GeeksforGeeks
        
        
  
        
          Top Center
        
  
        
          
              GeeksforGeeks
          
        
  
        
          Top Right
        
  
        
          
              GeeksforGeeks
          
        
     
  
    
        $(document).ready(function() {
        $(document).foundation(); })
    

  

输出：

示例 2：以下代码演示了下拉显式位置Left和Right 。

HTML

  

  
    
  
                
      
    
  
    
    

  
    
  
    
      GeeksforGeeks
    
  
    
        Foundation CSS Dropdown Explicit Positioning
    
  
    
      Left Top
    
  
    
        
            GeeksforGeeks
        
    
  
    
      Right Top
    
  
    
        
            GeeksforGeeks
        
    
  
    
      Left Center
    
  
    
        
            GeeksforGeeks
        
    
  
    
      Right Center
    
  
    
        
        GeeksforGeeks
        
    
  
    
      Left Bottom
    
  
    
        
            GeeksforGeeks
        
    
  
    
      Right Bottom
    
  
    
        
            GeeksforGeeks
        
    
  
  
  
    $(document).ready(function() {
      $(document).foundation(); })
   

  

输出：

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