html - 如何适合输入文本类型的边框？

Question

我希望边框与框对齐，我的代码有什么问题？任何帮助将不胜感激。

 .contact {
      background-color: rgb(233, 230, 227);
      height: 200px;
    }
    .contact h3 {
      text-align: center;
    }
    .form {
      text-align: center;
      max-width: 344px;
      width: 100%;
      border: 1px solid grey;
      transform: translatex(450px);
    }
    .form input {
      width: 100%;
      padding: 7px;
      /* font-size: 20px;*/
      border-radius: 5px;
      margin-top: 30px;
    }

  <section class="contact">
            <h3>
                Contact Us
            </h3>
            <div class="form">
                <input type="text" class="name" id="name">
            </div>
        </section>

Answer 1

添加 box-sizing: border-box; 以在 100% 宽度中包含默认或定义的填充和边框:

.contact {
  background-color: rgb(233, 230, 227);
  height: 200px;
}

.contact h3 {
  text-align: center;
}

.form {
  text-align: center;
  max-width: 344px;
  width: 100%;
  border: 1px solid grey;
  position: relative;
  left: 50%;
  transform: translatex(-50%);
}

.form input {
  width: 100%;
  padding: 7px;
  /* font-size: 20px;*/
  border-radius: 5px;
  margin-top: 30px;
  box-sizing: border-box;
}

<section class="contact">
  <h3>
    Contact Us
  </h3>
  <div class="form">
    <input type="text" class="name" id="name">
  </div>
</section>

P.S.:您显然试图将表单字段水平居中。这可能会像您使用的特定父容器宽度那样工作，但我将其更改为更通用的工作方法(请参阅 .form CSS 规则中添加/更改的三个参数)