常春岛资源网 Design By www.syssdc.com
表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。
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,对齐,表单,文本框
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 咏月风雅公测福利大全 有哪些奖励
- dnf装备成长攻略
- 鸣潮丹瑾适配武器选什么 丹瑾四星五星武器推荐
- dnf装备指令输入怎么输入
- 《对马岛之魂》超越《战神4》成为PC最火爆PS游戏!
- 《生化1 重制版》首批细节曝光!击杀敌人要更多子弹
- 国产游戏崛起!这款海外乱杀的国产游戏《七日世界》 要来了
- 阿杜.2003-哈啰【海蝶】【WAV+CUE】
- 群星1990-国语畅销金榜第7集[日本版][WAV+CUE]
- 陈凡骐.2024-陈凡骐首张同名创作专辑【FLAC分轨】
- 《黑神话:悟空》官网新图 老猴子手捧金箍
- 国外玩家谈《黑神话:悟空》定价:别是70美元
- 晨报|《全境封锁:腹地》实机视频泄露 《对马岛之魂》PC玩家数破纪录
- Supper.Moment.2020-Everything.Is.You【寰亚】【WAV+CUE】
- 张美玲.1999-福建不朽民谣【南方】【WAV+CUE】