为什么在添加带有 Link 的 FORM 后更改 HTML Table (TD) 高度

Question

我目前正在添加带有 Link 的表单到 table。

代码按预期工作，但 link 位置位于单元格顶部。

这导致其他单元格的高度因此发生变化。

代码如下：

[PHP]

echo '<td"><form id=\'form\' method="POST" action="test.php">
      <input type=\'hidden\' name=\'test\' value=\'test\' />
      <input type=\'hidden\' name=\'test2\' value=\'test2\' />
      <a id="myLink" title="Click to do something" href="#" 
      onclick="submitLink(\'form\');return false;">click here</a>
      </form></td>';

... [JavaScript]

<script>
function submitSessionForm(sessionID){
    //Submit Form
    document.getElementById(sessionID).submit();
    }
</script>

为什么单元格高度改变了？表单高度似乎不是导致问题的原因（因为在检查元素时，TD 导致行高发生变化。

如有任何建议，我们将不胜感激。

Answer 1

默认情况下，表单元素添加 1em 的 margin-bottom。

所以，添加

form {
  margin-bottom: 0;
}

顺便说一下，为什么不使用 " 作为属性。那么你就不需要到处都需要那些 \'（这不关我的事）。

<?php
echo '<td>
  <form id="form" method="POST" action="test.php">
    <input type="hidden" name="test" value="test" />
    <input type="hidden" name="test2" value="test2" />
    <a id="myLink" title="Click to do something" href="#" onclick="submitLink(\'form\'); return false;">click here</a>
  </form>
</td>';
...
?>

为什么在添加带有 Link 的 FORM 后更改 HTML Table (TD) 高度

Why is HTML Table (TD) height being changed after adding FORM with a Link

html

html-table