为什么我的包装器不能在 HTML 中工作？
这是我的 HTML 网站代码：
<div id="wrapper">
<div id="header">
<img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" />
</div> <!--- close Header--->
<div id="navbar">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Finished Assignments</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!---Close Nav --->
<h2>
<u>My report 1 </u>
</h2>
<p class="weeks"><u> Week 9</u></p>
<p>gas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srz </p>
<p class="para">ddsaga34tr5sdfsafg34srzddsagas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srz</p>
<!--- Footer --->
<div id="footer">footer</div>
</div> <!---Wrapper end --->
</body>
这是我的 CSS：
body
{
padding:5px;
}
p
{
margin:5px;
padding:5px;
}
p.weeks
{
font-size:25px;
padding-left:inherit;
text-align:center;
margin: 0 auto;
}
/*End general*/
div#wrapper
{
width:50em;
margin: 0 auto;
}
div#header
{
}
#nav {
width:50em;
margin: 0.5em 7em;
}
#nav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none;
}
/* End hide */
这个 HTML 文件中的内容在某种程度上不受包装器的约束，即使所有内容都在包装器类中。是不是少了点什么？
另外，如果您觉得自己无法回答这个问题，请随意发布一段代码，详细说明如何设置包装器。谢谢
This is my HTML website code:
<div id="wrapper">
<div id="header">
<img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" />
</div> <!--- close Header--->
<div id="navbar">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Finished Assignments</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!---Close Nav --->
<h2>
<u>My report 1 </u>
</h2>
<p class="weeks"><u> Week 9</u></p>
<p>gas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srz </p>
<p class="para">ddsaga34tr5sdfsafg34srzddsagas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srz</p>
<!--- Footer --->
<div id="footer">footer</div>
</div> <!---Wrapper end --->
</body>
And this is my CSS:
body
{
padding:5px;
}
p
{
margin:5px;
padding:5px;
}
p.weeks
{
font-size:25px;
padding-left:inherit;
text-align:center;
margin: 0 auto;
}
/*End general*/
div#wrapper
{
width:50em;
margin: 0 auto;
}
div#header
{
}
#nav {
width:50em;
margin: 0.5em 7em;
}
#nav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none;
}
/* End hide */
The contents within this HTML file is somehow not bound by the wrapper, even though all the content is within the wrapper class. Is there something missing from it?
Also if you feel you cannot answer the question, feel free to post up a code detailing how a wrapper should be set. Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
据我所知，您的代码工作正常。我看到的是你的两个 p 元素正在突破它。由于它们都是一个单词，浏览器不知道如何将其分解或分割，因此它不会像其中有空格那样将其换行，而是继续开箱即用。
有一个 css3 属性 word-wrap 在这些情况下可以提供帮助， p { word-wrap:break-word;但在这种情况下，我建议只需在测试内容中添加空格（或复制一些 loremipsum。）
Your code is working properly from what I can tell. What I see is that your two p elements are breaking out of it. Since they are all one word, the browser has no idea how to break it up or split it, so rather than wrapping it on a new line as it would if it had spaces in it, it's continuing out of the box.
There is a css3 property word-wrap that could help in these circumstances, p { word-wrap:break-word; } though in this case I would recommend simply adding spaces to your test content (or copying some loremipsum.)
添加溢出：隐藏；到你的包装 div。那应该排序它。
Add overflow: hidden; to your wrapper div. That should sort it.