您的位置：首页 > 其它

如何让多个输入框对齐

2016-07-15 20:16 387 查看

我们在制作用户的登录或者是注册表单时，经常会遇到输入框对不齐的情况，这样表单整体看起来就特别的丑，最简单的方法最笨的方法就是加空格，然而这种方法最好在迫不得已的是后才使用。接下来就给大家提供一个表单中的输入框对齐的模版。

以下只给出用户登录的html代码，验证码的代码不再说明。

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>用户登录</title>
<style>
form{padding:0px 15px 15px 120px;}
form{width:500px;height:300px;}
form fieldset{border:0;align:center;}
form label{display:inline-block;width:60px;text-align:right}
input{width:240px;height:30px;}
#submit{width:200px;height:35px;position:relative;left:70px;}
#submit:hover{
cursor: pointer;
background:#D8D8D8;
}
body{
width:100%;
height:100%;
background: #E9E9E9;
}
#box{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto;top:100px;}
#code{width: 70px;
height: 40px;
font-size:18px;}
#captcha_img{
position:relative;
bottom:-15px;
}
a{position:relative;bottom:-10px;}
</style>
</head>
<body>
<div id="box">
<form method="post"action="login.php"style="background:#cccccc">
<fieldset>
<p>
<label>用户名:</label>
<input type="text"name="username"placeholder="用户名"required="required"/>
</p>
<p>
<label>密码:</label>
<input type="password"name="password"placeholder="密码"required="required"/>
</p>
<p>
<label>验证码:</label>
<input type="text"name="authcode"value=""required="required" id="code"/>  
<img id="captcha_img"src="idcode.php"/>
<a href="javascript:void(0)"onclick="document.getElementById('captcha_img').src='idcode.php'">看不清</a><!-- javascript:void(0)是一个死链接不会跳转也不会返回到顶部. -->
</p>
<p>
<a href="register.html">没注册</a>
</p>
<p>
<input type="submit"value="登陆"name="submit" id="submit"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航