html - 为什么我的包装器在 HTML 中不起作用？

Question

这是我的 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 文件中的内容不知何故不受包装器的约束，即使所有内容都在包装器类中。它有什么遗漏吗？

此外，如果您觉得无法回答问题，请随时发布详细说明应如何设置包装器的代码。谢谢

Answer 1

据我所知，您的代码工作正常。我看到的是你的两个 p 元素正在突破它。由于它们都是一个词，浏览器不知道如何将其分解或拆分，因此与其将其换行，不如将其换行(如果其中有空格，则继续开箱即用)。

有一个 css3 属性 word-wrap 可以在这些情况下提供帮助，p { word-wrap:break-word; } 虽然在这种情况下，我建议只在测试内容中添加空格(或复制一些 loremipsum。)