HTML如何对齐多个表单中的文本框的实现
这篇文章主要介绍了HTML如何对齐多个表单中的文本框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。
html源代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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代码,表单即可对齐:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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代码段如下:
1 2 3 4 5 6 7 8 | 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如何对齐多个表单中的文本框的实现的文章就介绍到这了