html - CSS 联系表没有响应

Question

我已经创建了一个联系表，一切看起来都不错，符合我的要求，但有问题。调整浏览器大小/缩小浏览器时，表单没有响应。我搞砸了，我认为代码有点太多了，以至于我不知道我在做什么或已经做了什么。我快要疯了!

当我调整浏览器大小时，标签超出了它所在的容器。提交按钮也没有居中，即使我尝试 margin: 0 auto;

我将在下面发布 HTML 和 CSS 以及我的 CodePen。感谢您的帮助!

CodePen https://codepen.io/vCoCo/pen/MLReKK?editors=1100

HTML

<section id="contact">
  <div class="container">
    <form id="contactForm" action="contactform.php" method="post">
      <h2> Get In Touch! </h2>

      <div class="details">
        <label for="firstName"> First Name </label>
        <input type="text" id="firstName" name="firstName" placeholder="Enter First Name..." required>
      </div>

      <div class="details">
        <label for="lastName"> Last Name </label>
        <input type="text" id="lastName" name="lastName" placeholder="Enter Last Name..." required>
      </div>

      <div class="details">
        <label for="email"> Email </label>
        <input type="email" id="email" name="email" placeholder="Enter Email..." required>
      </div>

      <div class="details">
        <label for="textMessage"> Message </label>
        <textarea id="textMessage" name="textMessage" placeholder="Enter Message In Here..." required></textarea>
      </div>

      <input type="submit" value="Submit Message">

    </form>
  </div>
</section>

CSS

body{
  background-color: grey;
}
/**** GLOBAL ****/
.container{
  max-width: 80%;
  margin: auto;
  overflow: hidden;
  border: 2px solid white;
}

/********** CONTACT FORM **********/
#contact{
  max-width: 80%;
  margin: 100px auto;
  border: 1px dashed orange;
}

#contact .container{
  width: 500px;
  margin: 100px auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#contactForm{
  margin: 0 auto;
}

#contactForm h2{
  text-align: center;
  margin-bottom: 10px;
}

.details{
  max-width: 500px;
  margin: 15px;
  padding: 10px;
  border: solid 1px #ff0000;
  overflow: hidden;

}

label{
  margin-bottom: 10px;
}

input[type=text], input[type=email]{
  width: 400px;
  padding: 12px 20px;
  margin: 8px 0;
  border: 2px solid;
  border-radius: 4px;
}

input[type=submit]{
  width: 200px;
  padding: 10px 20px;
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
}

textarea{
  width: 300px;
  height: 200px;
  resize: none;
  font-size: 16px;
}

#contactForm textarea::placeholder{
  font-size: 16px;
}

Answer 1

几个元素的 width 有问题，你设置的是固定宽度，这会影响移动分辨率，容器溢出也会让子元素隐藏在父元素中.

响应模式的一个好的解决方案是将宽度设置为父级的 100%，并设置最大宽度以获得更高的分辨率。

我对你的 Codepen 做了一个分支。

重要:大多数问题也是，确保设置全局元素的 box-sizing。即 * { box-sizing: border-box;}

希望这对您有所帮助。

代码笔 https://codepen.io/devlumberjack/pen/rPbMzr?editors=1100