我正在学习一个关于 HTML5 的类(class)，我应该创建一个注册表格。我只允许更改 .html 文件而不是 .css 文件，并且我设法很好地对齐所有输入字段，“日期”输入字段除外。而且我不知道如何在不修改 .css 文件的情况下使它的大小与其他文件相同。
我已将表单的所有部分放入表格中，这有助于很好地对齐所有内容，除了“日期”输入字段。有谁知道为什么会发生这种情况，有没有办法以不同的方式对齐？ 将它们放在表格中是我唯一的想法。
header{
width: 100%;
height: 80px;
background-color: #cc6533;
display: inline-block;
}
header a:hover{
color: orange;
}
h1{
margin: 13px 15px 12px 13px;
color:black
}
input{
border: 1px solid #cc6533;
border-radius: 4px 0px 0px 4px;
}
form{
margin: 47px 0px 0px 34px;
}
#container{
margin-left: 11px;
width: 500px;
height: 300px;
border-radius: 4px;
border: 1px solid #cc6533
}
button{
border-radius: 4px;
border: none;
padding: 4px 9px 5px 10px;
margin: 6px 0px 0px 452px;
background-color: #cc6533;
}
select{
border-radius: 0px 4px 4px 0px;
border: none;
background-color: #cc6533;
padding: 1px;
}<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title>Destiny</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
Registration Form
</h1>
<main id= "container">
<form >
<table width= "100%">
<tr>
<td >Name:</td>
<td ><input type="text"></input></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date"></input></td>
</tr>
<tr>
<td>Country:</td>
<td>
<input list = "countries">
<datalist id = "countries">
<option value ="India">
<option value ="United States">
<option value ="United Kingdom">
<option value ="Australia">
<option value ="France">
</datalist>
</input></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="tel"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email"></input></td>
</tr>
<tr>
<td>website:</td>
<td><input type="url"></input></td>
</tr>
</table>
</form>
</main>
<button>
Submit
</button>
</body>最佳答案
你可以试试这个方法。我认为它会正常工作，
header{
width: 100%;
height: 80px;
background-color: #cc6533;
display: inline-block;
}
header a:hover{
color: orange;
}
h1{
margin: 13px 15px 12px 13px;
color:black
}
input{
border: 1px solid #cc6533;
border-radius: 4px 0px 0px 4px;
}
form{
margin: 47px 0px 0px 34px;
}
#container{
margin-left: 11px;
width: 500px;
height: 300px;
border-radius: 4px;
border: 1px solid #cc6533
}
button{
border-radius: 4px;
border: none;
padding: 4px 9px 5px 10px;
margin: 6px 0px 0px 452px;
background-color: #cc6533;
}
select{
border-radius: 0px 4px 4px 0px;
border: none;
background-color: #cc6533;
padding: 1px;
}
.dateField{
width:52%;
}<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title>Destiny</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
Registration Form
</h1>
<main id= "container">
<form >
<table width= "100%">
<tr>
<td >Name:</td>
<td ><input type="text"></input></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" class="dateField"></input></td>
</tr>
<tr>
<td>Country:</td>
<td>
<input list = "countries">
<datalist id = "countries">
<option value ="India">
<option value ="United States">
<option value ="United Kingdom">
<option value ="Australia">
<option value ="France">
</datalist>
</input></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="tel"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email"></input></td>
</tr>
<tr>
<td>website:</td>
<td><input type="url"></input></td>
</tr>
</table>
</form>
</main>
<button>
Submit
</button>
</body>关于html - 输入 "date"字段不会与 HTML 中的其他字段对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58316595/