如何让多个输入框对齐

最新推荐文章于 2024-04-09 19:55:52 发布

阿阿阿黄

最新推荐文章于 2024-04-09 19:55:52 发布

阅读量3.5w

点赞数 11

分类专栏： CSS

本文链接：https://blog.csdn.net/MBLHQ/article/details/51920673

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

以下只给出用户登录的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)"οnclick="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>

阿阿阿黄

关注

11
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
如何让多个输入框对齐

我们在制作用户的登录或者是注册表单时，经常会遇到输入框对不齐的情况，这样表单整体看起来就特别的丑，最简单的方法最笨的方法就是加空格，然而这种方法最好在迫不得已的是后才使用。接下来就给大家提供一个表单中的输入框对齐的模版，由于只有用户登录的代码模块，所以在显示的时候验证码处的图片为空。用户登录form{padding:0px 15px 15px 120px;}form{width:
复制链接

扫一扫