HTML如何对齐多个表单中的文本框
2018-03-25 12:07
3107 查看
表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。
html源代码:
表单显示效果图片:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/21/cc48c424f0ba89717c56ab2576974695)
为了使表单对齐,在HTML中添加如下CSS代码,表单即可对齐:
添加样式表之后的表单显示效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/21/156e8d377a9b814242b47705cd930129)
实现表单对齐的CSS代码段如下:
假设每个表单的父元素为
html源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>massage-board</title> </head> <body> <form action="board.php"> <fieldset> <p> <label for="title" >title:</label> <input type="text" id="title" name="title" align="left"> </p> <p> <label for="username">username:</label> <input type="text" id="username" name="username" align="left"> </p> <p> <label for="messageContent">message content:</label> <textarea id="messageContent" name="messageContent" cols="40" rows="5" align="left"></textarea> </p> <p> <input type="submit"> </p> </fieldset> </form> </body> </html>
表单显示效果图片:
为了使表单对齐,在HTML中添加如下CSS代码,表单即可对齐:
<style> fieldset{ background-color: #f1f1f1; border: none; border-radius: 2px; margin-bottom: 12px; overflow: hidden; padding: 0 .625em; } label{ cursor: pointer; display: inline-block; padding: 3px 6px; text-align: right; width: 150px; vertical-align: top; } input{ font-size: inherit; } </style>
添加样式表之后的表单显示效果
实现表单对齐的CSS代码段如下:
label{ cursor: pointer; display: inline-block; padding: 3px 6px; text-align: right; width: 150px; vertical-align: top; }
假设每个表单的父元素为
<p>标签,
<label>标签为表单的描述,也就是文本框左边的文字,
<input>标签为文本框。为了使标签对齐,只需要设置label标签中的width宽度为一定值即可,比如本例中为150px,因为label标签和input标签同属于p标签,他们是从左到右显示的,指定了label标签的长度,即可使表单的文本框对齐。
相关文章推荐
- HTML一个form表单中有两个(多个)submit,后台如何区分(纯HTML实现,无需javascript)
- HTML一个form表单中有两个(多个)submit,后台如何区分(纯HTML实现,无需javascript)
- 如何让表单文本框左边标签文本右对齐---label
- HTML一个form表单中有两个(多个)submit,后台如何区分(纯HTML实现,无需javascript)
- vf表单中如何根据组合框内容而选择不同文件再根据不同文件改变文本框的内容
- html运用(三) html如何禁止(表单)用户名、密码自动填充
- PPT中文本框如何快速对齐
- AngularJS进阶(三)HTML:让表单、文本框只读,不可编辑的方法
- html表单(文本框、密码、单选、复选、提交、重置、普通、隐藏、文件按钮、下拉选项)
- 如何对齐文本框和旁边的图像按钮
- php提交表单时如何保留多个空格及换行的文本样式
- HTML中让表单input等文本框为只读不可编辑的方法
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- AngularJS进阶(三)HTML:让表单、文本框只读,不可编辑的方法
- HTML中让表单input等文本框为只读不可编辑的方法汇总
- HTML文本框文字对齐方式(CSS vertical-align 属性)
- HTML中让表单input等文本框为只读不可编辑的方法
- 如何设计表单–文本框常见的问题(1)
- html中 如何使用 Javascript 实现防止表单反复提交
- 如何用js给html表单设置style