html - 在 CSS 中修复 HTML 表单

Question

有没有办法固定一个表格，使表格不发生波动？

所需的表单形状是:

表格的实际形状波动:

这是.css:

    form {

     background-color: white;
     padding: 20px;
     border: 1px solid black;
     position: fixed;
     top: 80%;
     left: 50%;
     transform: translate(-50%, -80%);
     float: left;
}

#textarea-container {
     float:right;
}
#inputs-container {
     float: left;
     width: 145px;
}

input[type=text] {
     width: 100%;
}


input, textarea {

     display: block;

}

textarea {
     height: 100px;
     width: 140px;
}

如果您查看 .css，position 的表单属性被标记为 fixed，但表单仍然会波动。

这是 HTML

  <form name="contactform" method="post" action="mail.php">
  <div id="textarea-container">
    <textarea  name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
  </div>
  <div id="inputs-container">
      <input  type="text" name="first_name" placeholder="First Name">
      <input  type="text" name="last_name" placeholder="Last Name">
      <input  type="text" name="email" placeholder="Email">
      <input  type="text" name="telephone" placeholder="Telephone">
    </div >
<input  id="submit" type="submit" value="Submit">
</form>

Answer 1

因为你在表单内的两个 div 上有 float ，你需要在它们周围放置一个包装器并设置一个固定的宽度，即:

  <form name="contactform" method="post" action="mail.php">
    <div id="wrapper">
      <div id="textarea-container">
        <textarea  name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
      </div>
      <div id="inputs-container">
        <input  type="text" name="first_name" placeholder="First Name">
        <input  type="text" name="last_name" placeholder="Last Name">
        <input  type="text" name="email" placeholder="Email">
        <input  type="text" name="telephone" placeholder="Telephone">
      </div >
    </div>
    <input  id="submit" type="submit" value="Submit">
  </form>

和

#wrapper{
    width:250px;
}