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

【问题标题】：Why are my input field shifted to the right? [duplicate]为什么我的输入框向右移动？ [复制]
【发布时间】：2020-06-29 04:02:43
【问题描述】：

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

【问题讨论】：

请在此处提供minimal reproducible example。
@DanielA.White 这不是一个最小可重现的例子吗？
它必须在问题本身中，而不是外部链接。
@DanielA.White 我正在等待我的编辑获得批准。

标签： html css margin

【解决方案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>

【讨论】：

这不会解决问题，但会隐藏它。我们仍然可以在小屏幕上看到问题

【解决方案2】：

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

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

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

【讨论】：