底部的菜单和文本位于div＃body标签中..我为此设置了绿色边框..菜单和底部文本应该在此绿色边框内，但它们不是。 。 这些代码有什么问题？为什么他们不适合边界？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>TLJ_Produits_Non_Alimentaires</title>
<style type="text/css" media="all">
/*-------------------------
CSS reset
----------------------------*/
html{margin:0px;padding:0px;width:1020px;height:auto;}
.wrapper{background:url(images/bgbg.jpg) repeat-y;width:100%;min-height:100%;margin-top:0px;margin-left:auto;margin-right:auto;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;line-height:1px}
/* Border*/
.top{width:977px;height:21px;background:url(images/top.png) no-repeat;}
.content{width:977px;height:auto;background:url(images/bg.png) repeat-y;}
.bottom{width:977px;height:21px;background:url(images/bottom.png) no-repeat;}
/*-------------------------
CSS for header
--------------------------*/
.header{width:100%;height:auto;}
/*-------------------------
CSS for menu
--------------------------*/
.menubar{margin-left:10px;width:100%;clear:both;height:68px}
.menu{background:url(images/menu.png) no-repeat; width:127px;height:68px;list-style:none;float:left;margin-top:10px;padding-top:10px;clear:both;}
.text{font-weight:bold;font-size:11px;text-transform:uppercase;line-height:1;margin-top:40px;text-decoration:none;}
#body{width:100%;border:#099 thin groove;}
#body p{margin-left:200px;float:left;clear:both;}
p.text{color:#060;border:#060 thick groove;padding-left:100px;margin-top:00px;width:600px;margin-right:100px;}
</style>
</head>
<body>
<div class="wrapper purple">
<div class="top"> </div>
<div class="content">
<div class="header">
<ul class="menubar white" >
<li class="menu">
<div id="redbar">lundi</div>
<a href="#" class="text purple">Pourquoi <br />tous les jours</a>
</li>
<li class="menu">
<div id="redbar">mardi</div>
<a href="#" class="text purple">produits <br />alimentaires</a>
</li>
<li class="menu">
<div id="redbar">mercredi</div>
<a href="#" class="text purple">produits<br />non-alimentaires</a>
</li>
<li class="menu">
<div id="redbar">jeudi</div>
<a href="#" class="text purple">tout<br />comprendre</a>
</li>
<li class="menu">
<div id="redbar">vendredi</div>
<a href="#" class="text purple">trouvez nos<br />produits</a>
</li>
<li class="menu">
<div id="redbar">samedi</div>
<a href="#" class="text purple">contactez-nous</a>
</li>
<li class="menu">
<div id="bluebar">dimanche</div>
<a href="#" class="text purple">j'aime</a>
</li>
</ul>
</div>
<div id="body">
<p class="text purple">retrouvez notre gamme de produits non alientaires. bientot plus de 300 references du quotidien.</p>
</div>
</div>
<div class="bottom"></div>
</div>
答案 0 :(得分：1)
您好我对您的代码进行了一些更改，特别是我已经替换了clear的用法：both; css并使用溢出：隐藏;代替。
另外考虑使用class =“redbar”而不是id =“redbar”，因为class是将特定样式应用于同一页面上的多个元素时使用的正确标记。
同样如ZippyV所述，菜单没有包含在id =“body”标签中，所以我也为你移动了这个！
以下是修改后的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TLJ_Produits_Non_Alimentaires</title>
<style type="text/css" media="all">
/*-------------------------
CSS reset
----------------------------*/
html{margin:0px;padding:0px;width:1020px;height:auto;}
.wrapper{background:url(images/bgbg.jpg) repeat-y;width:100%;min-height:100%;margin-top:0px;margin-left:auto;margin-right:auto;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;line-height:1px}
/* Border*/
.top{width:977px;height:21px;background:url(images/top.png) no-repeat;}
.content{width:977px;height:auto;background:url(images/bg.png) repeat-y;}
.bottom{width:977px;height:21px;background:url(images/bottom.png) no-repeat;}
/*-------------------------
CSS for header
--------------------------*/
.header{
width:977px;
}
/*-------------------------
CSS for menu
--------------------------*/
.menubar
{
margin-left:10px;
width:100%;
overflow:hidden;
}
.menu
{
background:url(images/menu.png) no-repeat;
width:127px;
height:68px;
list-style:none;
float:left;
margin-top:10px;
padding-top:10px;
}
.menu_title
{
padding: 5px 0;
}
.text{font-weight:bold;font-size:11px;text-transform:uppercase;line-height:1.5em;margin-top:40px;text-decoration:none;}
#body{width:100%;border:#099 thin groove;}
#body p
{
margin:0 auto 10px auto;
}
p.text{color:#060;border:6px groove #060;padding:5px 10px;width:700px;}
</style>
</head>
<body>
<div class="wrapper purple">
<div class="top"> </div>
<div class="content">
<div id="body">
<div class="header">
<ul class="menubar white" >
<li class="menu">
<div class="menu_title" id="redbar">lundi</div>
<a href="#" class="text purple">Pourquoi <br />tous les jours</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">mardi</div>
<a href="#" class="text purple">produits <br />alimentaires</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">mercredi</div>
<a href="#" class="text purple">produits<br />non-alimentaires</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">jeudi</div>
<a href="#" class="text purple">tout<br />comprendre</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">vendredi</div>
<a href="#" class="text purple">trouvez nos<br />produits</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">samedi</div>
<a href="#" class="text purple">contactez-nous</a>
</li>
<li class="menu">
<div class="menu_title" id="bluebar">dimanche</div>
<a href="#" class="text purple">j'aime</a>
</li>
</ul>
</div>
<p class="text purple">retrouvez notre gamme de produits non alientaires. bientot plus de 300 references du quotidien.</p>
</div>
</div>
<div class="bottom"></div>
</div>
希望这有帮助！