输入框未对齐

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 (left + right)

解决方案很简单，每个项目都值得做：

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

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>

输入框未对齐

Input boxes not lining up

html

css

text

input

form-submit