南强小屋 Design By 杰米
表单代码如图，还没有加入样式表，表单没有对齐，比较难看，但是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 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无HTML如何对齐多个表单中的文本框的实现的评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？