我需要在下面的文本框中腾出一点空间，我尝试了很多方法，但我不能

Question

我是编码新手，在这里需要一点帮助 我已经在我的网站"投诉表"上创建了一个页面，问题是我无法在文本框中腾出一点空间。在这里知道是否有人告诉我问题在哪里，我认为也有很多不必要的，你能告诉我或罚款代码吗？谢谢PS：如果我在在线编译器上运行此代码，则空格足够好。以下代码的当前图片 当前文本框空间

<table width="450px">
<table class="formcontrols">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" placeholder="First name" maxlength="20" size="30" required>
</tr>
<tr>
 <td valign="top">
  <label for="last_name">Last Name </label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" placeholder="Last name" maxlength="20" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="CNIC_No">CNIC No/NICOP * </label>
 </td>
 <td valign="top">
  <input  type="text" name="CNIC_No" placeholder="Registered CNIC/NICOP"maxlength="16" size="30"required>
 </td>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" placeholder="Registered Email"maxlength="29" size="30"required>
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="Mobile No">Mobile No *</label>
 </td>
 <td valign="top">
  <input  type="text" "name="Mobile no" placeholder="Registered Mobile" maxlength="15" size="30"required>
 </td>
</tr>
 <td valign="top">
  <label for="Cleint Code">Cleint Code *</label>
 </td>
 <td valign="top">
  <input  type="text" "name="Cleint Code" placeholder="Cleint Code" maxlength="05" size="30"required>
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="Address">Address</label>
 </td>
 <td valign="top">
  <input  type="text" name="Address" maxlength="60" size="30">
 </td>
</tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="60" rows="06"required></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit" class="submit-button"/>
 </td>
</tr>
</table>
<br>
 <font color="red">Note: Complaint will be only entertain if all details are match with account</font> </br>
 <br>

Answer 1

我不确定你为什么要用表格做你的表格。也有很多语法错误。我试图修复它。在我看来，您的表单应如下所示：

.container {
  border: 1px solid black;
}
.form-content {
  display: flex;
  flex-direction: column;
  padding: 1em;
 }
.form-content .content {  
  display: flex;
  margin-top: 10px;
  justify-content: center;
}
.content label {
  width: 20%;
}
.content input, textarea {
  width: 80%;
  padding: 10px;
}
.content input[type="submit"] {
  width: 100%;
}
@media only screen and (max-width: 600px) {
  .form-content {
    padding: 0;
  }
  .form-content .content {
    flex-direction: column;
    align-items: center;
  }  
  .content label {
  width: 80%;
  }
}

<div class="container">
  <form action="" method="" class="form-content">
      <div class="content">
        <label for="first_name">First Name *</label>
        <input type="text" id="first_name" placeholder="First name" maxlength="20" required>
      </div>
      <div class="content">
        <label for="last_name">Last Name </label>
        <input type="text" id="last_name" placeholder="Last name" maxlength="20">
      </div>
      <div class="content">
        <label for="CNIC_No">CNIC No/NICOP * </label>
        <input type="text" id="CNIC_No" placeholder="Registered CNIC/NICOP" maxlength="16" required>
      </div>
      <div class="content">
        <label for="email">Email Address *</label>
        <input type="text" id="email" placeholder="Registered Email" maxlength="29" required>
      </div>
      <div class="content">
        <label for="mobile_No">Mobile No *</label>
        <input type="text" id="mobile_no" placeholder="Registered Mobile" maxlength="15" required>
      </div>
      <div class="content">
        <label for="cleint_code">Cleint Code *</label>
        <input  type="text" id="cleint_code" placeholder="Cleint Code" maxlength="05" required>
      </div>
      <div class="content">
        <label for="address">Address</label>
        <input  type="text" id="address" maxlength="60" >
      </div>
      <div class="content">
        <label for="comments">Comments *</label>
        <textarea id="comments" maxlength="1000" cols="60" rows="06" required></textarea>
      </div>
      <div class="content">
        <input type="submit" value="Submit" class="submit-button"/>
      </div>
   </form>
   <font color="red">Note: Complaint will be only entertain if all details are match with account</font>
</div>

希望我帮助:)

Answer 2

不确定您需要什么空间，但您可以随时使用 CSS 控制填充、边距、高度、宽度和行高

如果你能在表格的顶部看到.. 我添加了以声明下面输入框的样式。

<style>
input, textarea {border: 1px solid #000000; border-radius: 3px; width: 390px; padding: 10px; outline: none}
.submit-button {background: #597ade; color: #FFF;}
</style>
<table width="450px">
<table class="formcontrols">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" placeholder="First name" maxlength="20" size="30" required>
</tr>
<tr>
 <td valign="top">
  <label for="last_name">Last Name </label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" placeholder="Last name" maxlength="20" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="CNIC_No">CNIC No/NICOP * </label>
 </td>
 <td valign="top">
  <input  type="text" name="CNIC_No" placeholder="Registered CNIC/NICOP"maxlength="16" size="30"required>
 </td>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" placeholder="Registered Email"maxlength="29" size="30"required>
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="Mobile No">Mobile No *</label>
 </td>
 <td valign="top">
  <input  type="text" "name="Mobile no" placeholder="Registered Mobile" maxlength="15" size="30"required>
 </td>
</tr>
 <td valign="top">
  <label for="Cleint Code">Cleint Code *</label>
 </td>
 <td valign="top">
  <input  type="text" "name="Cleint Code" placeholder="Cleint Code" maxlength="05" size="30"required>
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="Address">Address</label>
 </td>
 <td valign="top">
  <input  type="text" name="Address" maxlength="60" size="30">
 </td>
</tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="60" rows="06"required></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit" class="submit-button"/>
 </td>
</tr>
</table>
<br>
 <font color="red">Note: Complaint will be only entertain if all details are match with account</font> </br>
 <br>

在您可以添加的样式中填充：5px;- 表示 5(任何数字，取决于您的眼睛是否喜欢它(像素在文本框内为您提供更多空间。

行高：通常比字体大小高 6+ 像素，因此文本区域中的每一行都有更大的距离

Answer 3

您可以在样式中添加边距，例如左边距：40px，框将向左调整(请参阅您编辑的代码(。我留下了第一个盒子来给出差异。如果你想从顶部的空间，你也可以添加边距顶部。

<table width="450px">
<table class="formcontrols">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text"  name="first_name" placeholder="First name" maxlength="20" size="30" required>
</tr>
<tr>
 <td valign="top">
  <label for="last_name">Last Name </label>
 </td>
 <td valign="top">
  <input  type="text" style="margin-left: 30px;" name="last_name" placeholder="Last name" maxlength="20" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="CNIC_No">CNIC No/NICOP * </label>
 </td>
 <td valign="top">
  <input  type="text" style="margin-left: 30px;" name="CNIC_No" placeholder="Registered CNIC/NICOP"maxlength="16" size="30"required>
 </td>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" style="margin-left: 30px;" name="email" placeholder="Registered Email"maxlength="29" size="30"required>
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="Mobile No">Mobile No *</label>
 </td>
 <td valign="top">
  <input  type="text" style="margin-left: 30px;" name="Mobile no placeholder" placeholder= "Registered Mobile" maxlength="15" size="30"required>
 </td>
</tr>
 <td valign="top">
  <label for="Cleint Code">Cleint Code *</label>
 </td>
 <td valign="top">
  <input  type="text" style="margin-left: 30px;"  name="Cleint Code" placeholder="Cleint Code" maxlength="05" size="30"required>
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="Address">Address</label>
 </td>
 <td valign="top">
  <input  type="text" style="margin-left: 30px;" name="Address" maxlength="60" size="30">
 </td>
</tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="60" style="margin-left: 30px;" rows="06"required></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit" class="submit-button"/>
 </td>
</tr>
</table>
<br>
 <font color="red">Note: Complaint will be only entertain if all details are match with account</font> </br>
 <br>