1024问

Foundation 输入框尺寸

Nona ·
更新时间:2024-09-20
· 788 次阅读

Foundation 输入框尺寸

使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。

更多网格系统知识，可以点击 相等大小列

以下演示了相等大小列的实例:

实例
 

   

     
   

   

     
   

   

     
   

 


内联标签

如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中:

实例
 

   

     

       

         
       

       

         
       

     

   

 


前置和后置标签

你可以在

中添加前置和后置标签，元素为： <element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小：

实例
 

   

     

       

          Prefix
       

       

         
       

     

   

   

     

       

         
       

       

          Postfix
       

     

   

 


前置和后置标签按钮

可以使用 元素添加 .button 类来设置前置和后置按钮:

实例 Go
前置和后置标签圆角按钮 实例
 

   

     

       

          Prefix
       

       

         
       

     

   

   

     

       

         
       

       

          Postfix
       

     

   

 

 

   

     

       

          Go
       

       

         
       

     

   

   

     

       

         
       

       

          Go
       

     

   

 




输入 Foundation 输入框

1024 个赞
编辑 举报
需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章
Go 语言接口
Ethel 2021-03-23
556
HTML div 和span
Anne 2020-11-24
927
纯CSS实现波浪移动效果的示例
Maleah 2020-07-07
651
flutter微信聊天输入框功能实现
Tricia 2023-03-02
808
vue3使用vueup/vue-quill富文本、并限制输入字数的方法处理
Diane 2023-03-15
572
vue3如何实现​6位支付密码输入框
Tanisha 2023-04-28
29
Python入门教程(三十二)Python的命令行输入
Fawn 2023-05-02
1416
Ruby迭代器及文件的输入与输出
Miette 2023-05-12
1796
C++基础学习之输入输出流详解
Ursula 2023-05-12
71
reactechartstooltip区域新加输入框编辑保存数据功能
Irma 2023-05-13
356
React-Native之TextInput组件的设置以及如何获取输入框的内容
Rhea 2023-05-13
1206
js select支持手动输入功能实现代码
Miette 2023-05-17
422
React Hooks 实现的中文输入组件
Tani 2023-05-18
1776
c语言根据用户输入的出生年份并计算出当前年龄
Miette 2023-05-23
764
检查Bash中是否存在输入参数的问题
Willow 2023-07-20
380
C#textbox实时输入值检测方式
Ianthe 2023-07-20
1292
C#WinformTextBox控件多行输入方式
Penelope 2023-07-20
590
vue限制输入数字或者保留两位小数实现
Fredrica 2023-07-20
50
Qt中QTextEdit限制只能输入数字英文逗号
Bonita 2023-07-20
1233