Question

我已经创建了联系表，一切看起来都不错，就像我想要的一样，但是有问题。重新调整浏览器的大小/缩小时，表单没有响应。我搞砸了，我认为代码太过分了，以至于我不知道自己在做什么或已经做过什么。我要失去理智了！

当我调整浏览器大小时，标签会移出它所在的容器之外。即使我尝试margin: 0 auto;

，提交按钮也不会居中

我将在下面发布HTML和CSS以及我的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;}

希望这会有所帮助。

Codepen https://codepen.io/devlumberjack/pen/rPbMzr?editors=1100

CSS联系表单没有响应

1 个答案: