为什么我的输入框向右移动？ [复制]

Question

这个问题在这里已经有了答案：

显示 100% 的 div 宽度和边距（6 个答案）

去年关闭。

我有一个小网页，里面有一个容器和一个表单。 当我使用边距和填充时，输入字段似乎向右移动，甚至溢出 window，尽管它们的width为 100%

我将如何解决这个问题，我首先做错了吗？

代码：

 .mini-window { font-family: "Lato", sans-serif; width: 33%; margin:auto; -webkit-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75); box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75); padding: 20px; margin-top: 200px; text-align: center; } input { width: 100%; font-size: 17px; margin: 10px; padding: 5px; }

 <div class="center-container"> <div class="mini-window"> <h1>Registration</h1> <form> <input id="email" type="text" placeholder="Email"> <input id="password" type="password" placeholder="Password"> <input id="repeatPassword" type="password" placeholder="Repeat password"> <input id="organization" type="text" placeholder="Organization"> <input id="first" type="text" placeholder="First name"> <input id="last" type="text" placeholder="Last name"> <button type="button" onclick="registerClick()">Register</button> </form> <p id="errorMessage" class="error"></p> </div> </div>

Answer 1

您输入的宽度是包含 div 宽度的 100%，边距为 10px，您当然会得到该结果。

例如，将宽度更改为 90% 是一种简单的解决方法。

 .mini-window { font-family: "Lato", sans-serif; width: 33%; margin:auto; -webkit-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75); box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75); padding: 20px; margin-top: 200px; text-align: center; } input { width: 90%; font-size: 17px; margin: 10px; padding: 5px; }

 <div class="center-container"> <div class="mini-window"> <h1>Registration</h1> <form> <input id="email" type="text" placeholder="Email"> <input id="password" type="password" placeholder="Password"> <input id="repeatPassword" type="password" placeholder="Repeat password"> <input id="organization" type="text" placeholder="Organization"> <input id="first" type="text" placeholder="First name"> <input id="last" type="text" placeholder="Last name"> <button type="button" onclick="registerClick()">Register</button> </form> <p id="errorMessage" class="error"></p> </div> </div>

Answer 2

您可以通过将表单显示更改为 flex 来修复它

form {
  align-items : center;
  display : flex;
  flex-direction:column;
}

虽然，我不完全确定你的表单为什么会这样。 添加这些行，将其固定在您的代码笔上。