我是一名刚开始html5编程的学生，被老师要求创建一个表单。但是我目前遇到了一些问题。问题是我在字段集中的输入字段必须对齐，我不明白我的代码有什么问题:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="me">
<meta name="description" content="pizza order form">
<title>Pizza order form</title>
</head>
<body>
<style>
body {
background-image: url(Grey-website-background.png);
background-repeat: repeat;
padding:200px;
}
div {
margin:auto;
width:600px;
}
#dateoforder, #email, #name, #phone, #postal code, #time {
display:inline-block;
}
form {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
color:white;
background-image: url("1494002408354-pizza-story.jpg");
border: solid 8px #7F8013;
padding:12px;
width: 700px;
/* text-align: left;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 0.5em/**/
}/*margin auto sets the element to the center of the page*/
</style>
<div>
<form action="">
<h1>Pizza Order Form</h1>
Pizza Type:
<select required><!--select function allows for a html form dropdown list-->>
<option disabled value="" selected>Please select</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input type="number" min="1" max="4"/>
<br>
<fieldset name="Size">
<legend>Size:</legend>
<input type="radio" name="name" value="Small" ">Small
<!--radio buttons are circular buttons that look like options-->
<input type="radio" name="name" required value="Medium">Medium
<input type="radio" name="name" value="Large">Large<!--
By setting up the required attribute for
radio buttons,the user will have to select one of the radio
buttons before he can submit the form(regardless of which one has it. )-->
</fieldset>
<fieldset name="Crust">
<legend>Crust:</legend>
<input type="radio" name="name1" value="Thin" >Thin
<input type="radio" name="name1" required value="Thick">Thick
<input type="radio" name="name1" value="Deep Dish">Deep Dish
</fieldset>
<fieldset name="Toppings">
<legend>Toppings:</legend>
<input type="checkbox" name="Toppings" value="Mushrooms">Mushrooms
<input type="checkbox" name="Toppings" value="Sausage">Sausages
<input type="checkbox" name="Toppings" value="Olives">Olives
</fieldset>
<br>
Addons:
<select>
<option disabled value="Please select addons if required" selected>Please select addons if required</option>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
<fieldset name="Delivery details">
<legend>Delivery to:</legend>
<label for="Name">Name:</label>
<input type="text" name="name of customer" id="name">
<br><br>
<label for="Address">Address:</label>
<textarea cols="30" rows="2"></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" pattern="[0-9]{0,6}" id="postal code"><!--
{0,6} means number of characters must be from 0-6
{.6,}means minimum of 6 but no maximum -->
<br>
<label for="Phone">Phone#:</label>
<input type="text" pattern="[6,8,9][0-9]{0,8}" id="phone"><br>
<!--pattern attribute does not support input type number-->
<br>
<label for="Email address">Email:</label>
<input type="text" placeholder="Enter email addresses" id="email">
<br><br>
<label for="Date">Date:</label>
<input type="date" min="2017-11-01" max="2017-12-31" id="dateoforder">
<!--format of date in html is yyyy-mm-dd even though in chrom browser it shows dd/mm/yyyy
but for coding must use html default format-->
<label for="TOD">Time:</label>
<input type="time" min="10:00" max="22:00" step="900" value="10:00" id="time" required />
</fieldset>
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</div>
</body>
</html>
如您所见，“交付给”字段集中的字段集未对齐，我需要将它们对齐。我已经阅读了垂直对齐，但我不明白如何使用它。以下是指向我的网页表单图像的 google 驱动器文件夹的链接以及我需要的理想网页表单模板:
https://drive.google.com/open?id=0B7oJmOastgcNVWJvSHVMb0l6d00
最佳答案
获得“完美”表格的最佳方法是将其重建为一张 table ，我猜这就是“完美”表格的构建方式。否则，您很可能必须为每个输入字段添加特殊的填充，这很快就会失控。
关于html - 如何使不同行的输入形式相互对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47066280/