gpt4 book ai didi

html - 输入 "date"字段不会与 HTML 中的其他字段对齐

转载 作者:太空宇宙 更新时间:2023-11-03 22:12:58 25 4
gpt4 key购买 nike

我正在学习一个关于 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/

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