Question

我的表单设计有问题，如下所示。

<div class="myRegInfoForm">
            <form method="POST" action="action_reg.php">
                <table>
                    <tr>
                        <td>
                            <label>Name: </label>
                        </td>
                        <td>
                            <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Course applied for: </label>
                            <label><?php echo $CourseName ?></label>

                </table>
            </form>
    </div>

添加第二个<td>元素后，标签和输入文本框之间有一个宽大的空格，我不知道为什么。任何人都可以帮助我吗？

.myRegInfoForm {
    display:flex;
    justify-content:center;
    align-items:center;
}

我想要的输出：

Answer 1

将colspan="2"添加到第二行的td，如下所示。第一行中第一个td的宽度自动扩展以匹配第二行中第一个td的宽度，但是通过设置colspan，您可以使该单元跨越第一行中两个单元格的宽度

<div class="myRegInfoForm">
  <form method="POST" action="action_reg.php">
    <table>
      <tr>
        <td>
          <label>Name:</label>
        </td>
        <td>
          <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed." />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <label>Course applied for:</label>
          <label>
            <?php echo $CourseName ?>
          </label>
        </td>
      </tr>
    </table>
  </form>
</div>

或者，更好的是，不要使用表格，因为您似乎不想要表格布局。

Answer 2

将text-align设为td至right

.myRegInfoForm {
    display:flex;
    justify-content:center;
    align-items:center;
}

.myRegInfoForm td{
  text-align: right;
}

<div class="myRegInfoForm">
            <form method="POST" action="action_reg.php">
                <table>
                    <tr>
                        <td>
                            <label>Name: </label>
                        </td>
                        <td>
                            <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Course applied for: </label>
                            <label><?php echo $CourseName ?></label>

                </table>
            </form>
    </div>

Answer 3

因为你有另一个td，所以td将自动调整自己。
所以你需要使用float：right in label;

<td><label style="float:right;">Name: </label></td>

我希望这个帮助

Answer 4

我没有看到你的第二个tr的结束标记。对于最后一个td。

<div class="myRegInfoForm">
            <form method="POST" action="action_reg.php">
                <table>
                    <tr>
                        <td>
                            <label>Name: </label>
                        </td>
                        <td>
                            <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/>
                        </td>
                    </tr>
                    **<tr>
                        <td>**
                            <label>Course applied for: </label>
                            <label><?php echo $CourseName ?></label>

                </table>
            </form>
    </div>

Answer 5

您可以将输入放在相同的td标记中。像这样：

<td>
  <label style="display:inline-block;">Name: </label>
  <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/>
</td>

在标签和输入文本框之间形成表格宽的空格

5 个答案: