输入框不对齐答案

【问题标题】：Input boxes not lining up输入框不对齐
【发布时间】：2015-06-04 06:41:32
【问题描述】：

我是 HTML 新手，上次我一直在编辑我的代码时，我发现我的输入框没有完全对齐。我希望他们在右边排队。代码如下：

input
{
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: solid 3px #66004C;
  background: #cdcdcd; 
}

<div style="float: left; position: relative; left: 50%;">
	<div style="float: left; position: relative; left: -50%;">	
		<form action="" method="post">
 			<input type="text" name="username" placeholder="Username">
 			<input type="password" name="password" placeholder="Password">
 			<input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
			<input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004C;"/>  
		</form> 	
	</div>
</div>

我也搜索了网络，但没有找到正确的答案..

提前致谢。

【问题讨论】：

标签： html css text input form-submit

【解决方案1】：

填充为任何元素增加了额外的宽度。在你的情况下，额外的 50px（左 + 右）

解决方案简单，值得在每个项目中使用：

* { Box-sizing: Border-box }

input
{
	margin: 				auto;
    padding: 				25px;
    font: 					normal 15px Verdana, Tahoma, sans-serif;
    width: 					100%;
	border-left: 			0;
	border-right: 			0;
	border-top: 			0;
	border-bottom: 			solid 3px #66004C;
    background: 			#cdcdcd; 

}
* { box-sizing: border-box }

<div style="float: left; position: relative; left: 50%;">
	<div style="float: left; position: relative; left: -50%;">	
		<form action="" method="post">
 			<input type="text" name="username" placeholder="Username">
 			<input type="password" name="password" placeholder="Password">
 			<input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
			<input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004C;"/>  
		</form> 	
	</div>
</div>

【讨论】：

【解决方案2】：

在您的样式表中添加这个CSS3 box-sizing Property。

* {
  box-sizing: border-box;
}

【讨论】：

【解决方案3】：

只需为输入设置box-sizing。

了解更多关于CSS3 box-sizing Property

input {
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border: 0;
  border-bottom: solid 3px #66004c;
  background: #cdcdcd; 
  box-sizing: border-box;
}

<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">	
    <form action="" method="post">
 	  <input type="text" name="username" placeholder="Username">
 	  <input type="password" name="password" placeholder="Password">
 	  <input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
	  <input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004C;"/>  
	</form> 	
  </div>
</div>

【讨论】：

【解决方案4】：

#main
    {
     align:right;
    }
input {
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border: 0;
  border-bottom: solid 3px #66004c;
  background: #cdcdcd; 
  box-sizing: border-box;
  align:right;
}



<div id="main" style="float:right; position: relative; ">
  <div style="float: right; position: relative; ">  
    <form action="" method="post">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="password" placeholder="Password">
      <input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
      <input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom:    solid 5px #66004C;"/>  
    </form>     
  </div>
</div>

【讨论】：