下面的代码适用于我需要的东西(三个水平按钮),除了它不居中。它位于屏幕的左侧。我做了一些研究并且无法解决它,并尝试使用“浮动”和“显示:内联”的无表格设计,并且无法使其居中。请帮忙!
<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>
正如其他人提到的<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>
<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>
在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%)