如何让表单文本框左边标签文本右对齐---label
2017-10-01 20:58
1571 查看
当我们设计表单文本框布局时,希望布局好看。前边的文字与文本框契合完美。文字上下行对齐。
通常使用 <table> 标签实现代码。其实也可以用 <label> 标签实现
下边是一个例子 如何修改css实现文本框和前边字体右对齐。
HTML代码:
结果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/15/e377970e8bd201957a46fbbbd0acf534)
该例是将label这个“容器”变宽。使得其可以任里边的字体自由移动。
该例中<label>中加入文本框前边的字体,将 label 标签设置宽度,
使label宽度足够宽而不会根据<label>标签中字体个数的填充而改变宽度。
再用 text-align 属性设置 label 标签中的字体右对齐。
注意如果仅仅设置了<label>标签的宽度,而不设置其左浮动 float:left ,则不会实现最后的效果。
通常使用 <table> 标签实现代码。其实也可以用 <label> 标签实现
下边是一个例子 如何修改css实现文本框和前边字体右对齐。
HTML代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} form div { margin:5px 0;} .int label { width:100px; float:left; text-align:right; } .int input { padding:1px 1px; border:1px solid #ccc; height:16px;} .sub { padding-left:100px;} .sub input { margin-right:10px; } </style> </head> <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="usrname" class="required" > </div> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" > </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo"> </div> <div class="sub"> <input type="submit" value="提交" id="send" > <input type="reset" id="res"> </div> </form> </body> </html>
结果图:
该例是将label这个“容器”变宽。使得其可以任里边的字体自由移动。
该例中<label>中加入文本框前边的字体,将 label 标签设置宽度,
使label宽度足够宽而不会根据<label>标签中字体个数的填充而改变宽度。
再用 text-align 属性设置 label 标签中的字体右对齐。
注意如果仅仅设置了<label>标签的宽度,而不设置其左浮动 float:left ,则不会实现最后的效果。
相关文章推荐
- 如何在单击label标签时让文本框获得焦点?
- css中如何让input标签对齐,左边lable标签也对齐
- HTML如何对齐多个表单中的文本框
- Flex中通过设置textAlign和labelStyleName样式设置FormItem容器中标签文本对齐方式的例子
- Flex中如何设置CheckBox标签(Label)与主题(theme )颜色的例子
- 关于带标签的注记如何获得其注记文本的问题
- 当标签内有嵌套的子标签的情况下,如何用jquery检索纯文本内容
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- iOS上如何让按钮文本左对齐问题
- 如何实现文本框焦点自动跳转及通过回车键提交表单
- Cocos2d-x v3.0正式版尝鲜体验【3】 Label文本标签
- form表单中的label标签
- 在ASP.NET登录页面中如何实现文本框焦点自动跳转及通过回车键提交表单
- 爬虫奇遇记——如何按照标签的文本内容来抓取
- 如何:控制文本框文本更新源的时间
- 在学习HTML——form表单中的label标签时的一点小体会
- 利用label标签和CSS美化文件上传表单(不兼容IE6)
- 写分页时如何用jq获取当前标签文本的值
- 如何对齐文本框和旁边的图像按钮
- HTML提交表单用户选择的头像如何利用<select>标签提交到PHP并连接数据库进行存读操作