<button>未正确继承css属性

Question

h2 {
  text-align: center;
  font-family: fantasy
}
.form {
  margin-top: 100px;
}
.form * {
  margin: auto;
}

<form method="post">
  <div class="form">
    <table>
      <tr>
        <td class="label">Username</td>
        <td>
          <input type="text" name="username" value={{username}}>
        </td>
      </tr>

      <tr>
        <td class="label">Email (optional)</td>
        <td>
          <input type="text" name="email" value={{email}}>
        </td>
      </tr>

      <tr>
        <button type="submit">Create Account!</button>
      </tr>
    </table>

  </div>
</form>

当我在Chrome中运行它时，按钮元素似乎完全忽略了css并显示在屏幕的左端，也高于其余的表行（当它应该在事实如下！）。

我尝试用<input type="submit">代码替换它，但它显示了同样的问题。

任何想法为什么这个按钮元素行为不端？

Answer 1

您的HTML无效。您试图将按钮作为表行的子元素，但只有表格单元格可能是表格行的子元素。

添加TD。

更好的是，stop using tables for layout。

使用适当的标记，包括labels并应用layout with CSS。

＆＃13;

＆＃13;

h2 {
  text-align: center;
  font-family: fantasy
}
.form {
  margin-top: 100px;
}
.form * {
  margin: auto;
}

＆＃13;

<form method="post">
  <div class="form">
    <table>
      <tr>
        <td class="label">Username</td>
        <td>
          <input type="text" name="username" value={{username}}>
        </td>
      </tr>

      <tr>
        <td class="label">Email (optional)</td>
        <td>
          <input type="text" name="email" value={{email}}>
        </td>
      </tr>

      <tr>
        <td><button type="submit">Create Account!</button></td>
      </tr>
    </table>

  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您忘了将按钮结束到td：

<form method="post">
  <div class="form">
    <table>
      <tr>
        <td class="label">Username</td>
        <td>
          <input type="text" name="username" value={{username}}>
        </td>
      </tr>

      <tr>
        <td class="label">Email (optional)</td>
        <td>
          <input type="text" name="email" value={{email}}>
        </td>
      </tr>

      <tr>
      <td colspan=2>
        <button type="submit">Create Account!</button>
        </td>
      </tr>
    </table>

  </div>
</form>