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

您的代码可以正常工作。我看到的是你的两个元素正在突破它。因为它们都是一个单词，所以浏览器不知道如何分解或分割它，所以不是将它包装在新的行上，如果它有空格，它就会继续开箱即用。

在这些情况下，有一个css3属性自动换行，p {word-wrap：break-word;虽然在这种情况下，我建议只是在测试内容中添加空格（或复制一些loremipsum。）

Answer 2

添加溢出：隐藏;你的包装div。这应该排序。

为什么我的包装器不能用于HTML？

2 个答案: