页面input控件对齐
<!--用table布局、 label的inline-block 对齐input-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
label{
/*设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。*/
display: inline-block;
min-width: 100px;/*或者 width: 100px;*/
}
</style>
</head>
<body>
<div class="web_login">
<ul>
<ul>
<!--accept-charset 属性规定服务器处理表单数据所接受的字符集.此属性的默认值是
"unknown",表示表单的字符集与包含表单的文档的字符集相同-->
<form name="form2" id="regUser" accept-charset="utf-8" action="/security/addregister" method="post">
<!--用label对齐-->
<label for="input1">登录名:</label>
<input type="text" id="input1" name="name1"></input>
<br />
<label for="input2">密码:</label>
<input type="text" id="input2" name="name2"></input>
<!--用table对齐-->
<table >
<tr>
<td>用户名:</td>
<td><input type="text" name="username" maxlength="16"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password1" maxlength="16" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="password2" maxlength="16" /></td>
</tr>
</table>
<div class="inputArea">
<a th:href="@{/security/readdoc}" target="_blank">阅读注册协议</a>
<input type="submit" value="同意协议并注册"/>
</div>
</form>
</ul>
</ul>
</div>
</body>
</html>