Question

以下代码适用于我需要的内容（三个水平按钮），但它不居中。它位于屏幕的左侧。我做了一些研究并且无法修复它，并尝试使用＆＃34; float＆＃34;进行无表格设计。和＆＃34;显示：内联＆＃34;并且无法让它居中。求救！

<table>
<td>
<tr>
<form method="get" action="index.php"><button type="submit">Home</button></form>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</tr>
</td>
</table>

Answer 1

<tr>（行）应在外面

<table>
    <tr>
        <td>
            <form method="get" action="index.php"><button type="submit">Home</button></form>
        </td>
        <td>
            <form method="get" action="signup"><button type="submit">Create Account</button></form>
        </td>
        <td>
            <form method="get" action="login"><button type="submit">Login to Account</button></form>
        </td>
    </tr>
</table>

jsFiddle Demo

Answer 2

反转html中的tr和td。

<table>
<tr>
<td>
<form method="get" action="index.php"><button type="submit">Home</button></form>
</td>
<td>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
</td>
<td>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</td>
</tr>
</table>

尝试将此添加到css

 td {
     text-align: center;
 }

不要忘记设置桌子的宽度！（所有窗口100％）

Answer 3

正如其他人提到的<td>应该在<tr>内。默认情况下，<form>显示为块元素。将其更改为inline-block。

table {
  border: 1px solid red;
  width: 100%;
}
td {
  border: 1px solid green;
  text-align: center;
}
form {
  display: inline-block;
}

<table>
  <tr>
    <td>
      <form method="get" action="index.php">
        <button type="submit">Home</button>
      </form>
      <form method="get" action="signup">
        <button type="submit">Create Account</button>
      </form>
      <form method="get" action="login">
        <button type="submit">Login to Account</button>
      </form>
    </td>
  </tr>
</table>

如何将表格放在表格中？

3 个答案: