gpt4 book ai didi

html - 文本输入边框在表单中被截断

转载 作者:可可西里 更新时间:2023-11-01 13:45:37 24 4
gpt4 key购买 nike

在 Chrome(和仅 chrome)中,我创建的表单出现了这个奇怪的图形故障:

Screenshot (on local computer)

Screenshot (on github editor)

如您所见,左边框似乎刚刚被切断。下面我有代码:

body {
text-align: center;
}

td {
vertical-align: middle;
padding: 2px;
}

#login-table td:nth-child(1) {
text-align: right;
}

#login-table input {
padding: 2px;
}

#login-table {
margin-bottom: 14px;
}

#login {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.required {
font-weight: bold;
}
<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="login">
<h2>Administrator Registration</h2>
<form method="POST">
<table id="login-table">
<tr>
<td class="required">Username:</td>
<td><input type="text" name="username" required/></td>
</tr>
<tr>
<td class="required">Email:</td>
<td><input type="text" name="email" required/></td>
</tr>
<tr>
<td class="required">Password:</td>
<td><input type="password" name="password" required/></td>
</tr>
<tr>
<td class="required">Confirm Password:</td>
<td><input type="password" name="confirm" required/></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first-name"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="last-name"/></td>
</tr>
</table>
<input type="submit" value="Register"/>
</form>
</div>
</body>
</html>

我已经针对相关问题尝试了很多解决方案,但我找不到任何可以解决此问题的方法。请帮忙!谢谢!

最佳答案

输入添加边框

#login-table input {
border: 1px solid #f00;
padding: 2px;
}

关于html - 文本输入边框在表单中被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44181487/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com