【发布时间】：2020-11-29 16:40:54
【问题描述】：
当我预览我的页面时，我希望看到一个 div(wrapper) 居中，宽度为 940 像素，围绕着页面的其他元素。同样在我的 CSS 中，我使 div(wrapper) 具有黑色背景色。由于某种原因，没有证据表明这个包装器，并且我的 HTML 或 CSS 中没有明显的错误。我的 CSS 也连接到我的 html 并且除了我的包装器之外的所有其他元素都可以格式化。为什么？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link href="css/styles.css" type="text/css"
rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>
Exotic Honey
</h1>
</header>
<main>
<form action="http://compass.northseattle.edu/~aali/it111/form/formhandler.php" method="post">
<fieldset>
<legend>Place Order</legend>
<label>Name</label><input type="text" name="name">
<label>Email</label><input type="email" name="email">
<label>Payment</label>
<ul>
<li><input type="radio" name="payment" value="mastercard">MasterCard</li>
<li><input type="radio" name="payment" value="visa">Visa</li>
<li><input type="radio" name="payment" value="americanexperess">AmericanExpress</li>
</ul>
<label>Honeys</label>
<ul>
<li><input type="checkbox" name="honey" value="pitcairn">Pitcairn</li>
<li><input type="checkbox" name="honey" value="sage">Sage</li>
<li><input type="checkbox" name="honey" value="lavendar">Lavendar</li>
</ul>
<label>Continents</label>
<select name="regions">
<option value="na">North America</option>
<option value="sa">South America</option>
<option value="eu">Europe</option>
<option value="as">Asia</option>
<option value="af">Africa</option>
<option value="oc">Oceania</option>
</select>
<input type="submit" value="submit">
</fieldset>
</form>
</main>
<aside>
<figure>
<img class="right" src="images/honeypic.jpg" alt="honey jar">
<figcaption>Rare exotic honey</figcaption>
</figure>
</aside>
<footer>
<ul>
<li>Copyright ©</li>
<li><a href="">Terms of use</a></li>
<li><a href="http://compass.northseattle.edu/~aali/it111/index.html">Web design by Alas</a></li>
</ul>
</footer>
</div>
</body>
</html>
这是我的 CSS
<style>
div#wrapper{
width:940px;
margin:20px auto;
background: black;
}
header{
color:goldenrod;
height:auto;
background-color:purple;
margin:20px auto;
text-align:center;
font-style:italic;
}
footer{
color:goldenrod;
height:auto;
background-color:darkred;
clear:both;
}
footer ul{
list-style-type: none;
margin-left:20px;
}
footer li{
float:left;
margin-right:30px;
}
main{
background-color:beige;
float:left;
width: 500px;
}
aside{
width:250px;
float:right;
margin-right:30px;
padding-right:30px;
background-color:darkgray;
}
label{
display:block;
}
input[type=submit]{
width:auto;
}
input[type=radio]
input[type=checkbox]{
width:auto;
height:auto;
margin-right:5px;
margin-left:5px;
}
form li{
list-style-type: none;
margin-left:auto;
}
legend{
font-size:1.3em;
font-style:italic;
}
.right{
width:250px;
height:250px;
padding-right:30px;
margin-right:30px;
}
</style>
这是预览
【问题讨论】：