Javascript 表格右侧的边距神奇地改变了吗？

我试着让我的状态居中，但右边有一个神奇的边距。我试图让我的表单响应，但当我向下调整窗口大小时，我的提交按钮也不想居中，有什么提示吗？ -在语言上使用SCS

a

---

您通常缺少要设置为

边框框

的

框大小

属性，因此您的元素可以将

边距

和

填充

包含在其大小的总体计算中。
然后您可以将其设置为

宽度：100%

，如下所示：

CSS:

@import "elements.less";
@import "normalize.less";
@import "var.less";

#main {
    p {
        a {

        }
    }
}

body {
.font();
}
header img {
    margin: 0 auto;
    display: block;
    margin-top: 3%;
    border: 4px @blue solid;
}
section p {
    .font(20px);
    text-align: center;
}
section > p {
    margin-bottom: 5px;
}
.contact-info {
    border: 2px black solid;
    margin: 20px auto 20px auto;
    width: 80%;
}
#contact-area {
    width: 600px;
    margin-top: 25px;
    margin: 0 auto;
    border: 2px black solid;
    padding: 15px;
        input, textarea {
            padding: 5px;
            width: 471px;
            font-family: Helvetica, sans-serif;
            font-size: 1.4em;
            margin: 0px 0px 10px 0px;
            border: 2px solid #ccc;
            }
        textarea {
            height: 200px;
        }
        textarea:focus, input:focus {
            border: 2px solid #900;
        }
        input.submit-button {
            width: 100px;
            float: right;
            background-color: #0066FF;
            text-transform: uppercase;
        }
}


label {
    float: left;
    text-align: left;
    margin-right: 15px;
    width: 100px;
    padding-top: 5px;
    font-size: 1.4em;
}


#main {
 p {

 }
}

.post-it{
  margin-top: 50px;
}

.note {
  color: #333;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  font-family: Satisfy;
  font-size: 30px;
  box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
  background: #eae672;
}
ul.share-buttons{
  list-style: none;
  padding: 0;
  text-align: center;
}

ul.share-buttons li{
  display: inline;
}

p {
    color: black;
    .tr(all 0.3s linear);
    &.class1 {

    }
    &:hover {
        color: lime;
        .tr(all 0.3s linear);
    }
} 

@media screen and (max-width: 1000px) {
    html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
    #contact-area {
        width: 100%;
                input, textarea {
                    width: 100%;
                }
        input.submit-button {
            width: 100%;
            margin: 0 auto;
            float: left;
            background-color: #0066FF;
            text-transform: uppercase;
        }
    }
}   

---

因此，在我看来，您需要对元素进行额外的控制。可以在表单中使用div来完成

<form>
  <div class="form-element">
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name" />
  </div>
</form>

---

如果您希望提交按钮居中，请不要将其向右浮动。

没问题，如果答案确实对您有帮助，您显然可以自由接受答案；）

#contact-area {
  width: 100%;
  max-width: 600px;

  .form-element {
    width: 470px;
    margin: 0 auto;

    > label {
      width: 125px;
      display: inline-block;
    }

    > input,
    > textarea {
      display: inline-block;
    }
  }
}