基础 CSS 表单标签定位

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

表单是从用户那里获取输入并上传到服务器进行处理的方式。用户提供的输入可以是不同的类型，例如密码、文本、电子邮件等。

标签定位可用于使用表单输入定位标签。这些标签可以放在输入的不同单元格或列中。用 div 标签包裹 label 标签，在网格的影响下，可以起到列的作用。我们还可以通过指定不同的可用类来重新对齐标签，例如.text-right 、 .text-left 、 .text-center 、 .float-left 、 .float-right等。这样，我们可以简单地使用定位标签标签各种班级。

基础 CSS 标签定位类：

• grid-x ：该类创建水平方向的网格结构。
• text-right：将标签文本定位到容器的内右侧。
• text-left：将标签文本定位到容器的内部左侧。
• text-center：将标签文本水平放置在中心。
• float-left ：用于使元素向左浮动。
• float-right ：用于使元素向右浮动。
• 中间：将标签文本垂直定位到中心。

注意：文本类类似于浮点类，可以互换。

句法：

    

        

            
                Name of Label
            
        
        

            
        
    

我们将通过示例探索标签的各种位置及其实现。

示例 1 ：在下面的示例中，我们将标签放置在最左角。

HTML

  

    
    
    
    
    
    Label Positioning

  

    
        
            GeeksforGeeks
            
                Foundation CSS Label Positioning
             
        
        
            
                
                    Age
                    
                
                
                    
                
            
        
    

输出：

位于最左角的标签

示例 2：在下面的示例中，我们将标签放置在最右边的角落，靠近输入标签。

HTML

  

    
    
    
    
    
    Label Positioning

  

    
        
            GeeksforGeeks
            Foundation CSS Label Positioning
        
        
            
                
                    Age
                    
                
                
                     
                
            
        
    

  

输出：

位于最右角的标签

示例 3：在下面的示例中，我们将标签在其容器中垂直居中。

HTML

  

    
    
    
    
    
    Label Positioning

  

    
        
            GeeksforGeeks
            Foundation CSS Label Positioning 
        
        
            
                
                    Age
                    
                
                
                     
                
            
        
    

输出：

标签垂直居中

示例 4：在下面的示例中，我们将标签水平和垂直居中。

HTML

  

    
    
    
    
    
    Label Positioning

  

    
        
            GeeksforGeeks
            Foundation CSS Label Positioning 
        
        
            
                
                    Age
                    
                
                
                    
                
            
        
    

输出：

标签水平和垂直居中

参考资料： https://get.foundation/sites/docs/forms.html