html - 如何在表格中居中特定项目?
问题描述
我创建了一个注册表单,之后它将使用 PHP 与 SQL 数据库连接。问题是我无法在表格中居中提交按钮。据我所知 HTML5 不支持表格功能。所有 HTML 代码都在 PHP 文件中。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section>
<form action="#" method="post">
<table>
<tr>
<td><label>Full Name:</label><td>
<td><input type="text" placeholder="Full Name" name="name" ><br></td>
</tr>
<tr>
<td><label>E-mail:</label><td>
<td><input type="email" placeholder="E-mail" name="email" ><br><td>
</tr>
<tr>
<td><label>Username:</label><td>
<td><input type="text" placeholder="Username" name="username" ><br><td>
</tr>
<tr>
<td><label>Password:</label><td>
<td><input type="password" placeholder="Password" name="password" ><br><td>
</tr>
<tr>
<td><input type="submit" name="Registration" value="Submit" ><br><td>
</tr>
</table>
</form>
</section>
</body>
</html>
body {
background: #40E0D0;
background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
}
form {
text-align: center;
display: flex;
justify-content: center;
}
table {
display: flex;
background-color: lightcyan;
margin: 15px;
padding: 15px;
}
tr {
text-align:center;
}
td {
margin-right: 10px;
}
input {
width: 300px;
height: 25px;
}
解决方案
1)。您应该在最后一个 td 中添加一个 colspan。2)。确保结束标签的格式正确 -></td>
当您关闭“td”标签时,您应该使用 ,。请参阅下面的更新 HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section>
<form action="#" method="post">
<table>
<tr>
<td><label>Full Name:</label></td>
<td><input type="text" placeholder="Full Name" name="name" ></td>
</tr>
<tr>
<td><label>E-mail:</label></td>
<td><input type="email" placeholder="E-mail" name="email" ></td>
</tr>
<tr>
<td><label>Username:</label></td>
<td><input type="text" placeholder="Username" name="username" ></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" placeholder="Password" name="password" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Registration" value="Submit" ></td>
</tr>
</table>
</form>
</section>
</body>
</html>
推荐阅读
- wordpress - Wordpress app behind ELB jQuery not defined
- flutter - 如何在 Flutter 中添加垂直分隔线?
- http - 嵌套的 ServeMux 总是返回“301 Moved Permanently”
- deep-learning - 如何绕过稀疏自动编码器中的第二轮激活函数输出?
- javascript - 在构造函数中使用 window.onload 时无法获取错误
- jquery - jQuery: prev(child selector) 没有给出想要的结果
- r - 如何通过使用多个字段来计算带有组的值
- firebase - 如何管理具有可变时间间隔的重复出现的 Cloudfunctions?
- arm - Linux 内核模块作弊 - Qemu Baremetal Xilinx Zynq A9
- c++ - 提升共享内存映射地址