我有一个小网页,里面有一个容器和一个表单。当我使用边距和填充时,输入字段似乎向右移动,甚至溢出窗口,尽管它们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>