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

【问题标题】：Why does my wrapper not work in HTML?为什么我的包装器在 HTML 中不起作用？
【发布时间】：2011-11-25 13:01:12
【问题描述】：

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

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

【问题讨论】：

您最好缩小您的问题和代码示例，以增加获得好答案的机会。
把与实际问题无关的代码全部删除即可。具体一点。

标签： html css tags wrapper

【解决方案1】：

据我所知，您的代码运行正常。我看到的是你的两个 p 元素正在突破它。由于它们都是一个单词，浏览器不知道如何将其拆分或拆分，因此与其将其换行，就像它有空格时那样，而是继续开箱即用。

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

【讨论】：

【解决方案2】：

添加溢出：隐藏；到你的包装器 div。那应该对它进行排序。

【讨论】：