Question

我是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>

我也在网上搜索但没有找到正确答案..

提前致谢。

Answer 1

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

解决方案很简单，值得在每个项目中完成：

* { Box-sizing: Border-box }

＆＃13;

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 }

＆＃13;

<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>

＆＃13;

Answer 2

只需输入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>

Answer 3

在样式表中添加此CSS3 box-sizing Property。

* {
  box-sizing: border-box;
}

Answer 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>

输入框没有排队

4 个答案: