为什么我的输入字段向右移动?
Why are my input field shifted to the right?
我有一个小网页,里面有一个容器和一个表单。当我调整边距和填充时,输入字段似乎向右移动,甚至溢出 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>
您可以通过将表单显示更改为 flex 来解决此问题
form {
align-items : center;
display : flex;
flex-direction:column;
}
不过,我不完全确定为什么您的表单会这样。添加这些行,将其固定在您的代码笔上。
您输入的宽度是包含 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>
我有一个小网页,里面有一个容器和一个表单。当我调整边距和填充时,输入字段似乎向右移动,甚至溢出 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>
您可以通过将表单显示更改为 flex 来解决此问题
form {
align-items : center;
display : flex;
flex-direction:column;
}
不过,我不完全确定为什么您的表单会这样。添加这些行,将其固定在您的代码笔上。
您输入的宽度是包含 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>