Question

我是CSS的新手，我们的任务是创建一个简单的网站，我决定创建一个专门用于avril lavigne的简单网站（请不要评判我）一切顺利，我的容器div始终在中心，我不明白为什么我的容器内的导航栏超出了容器边框的线条。这是截图

screenshot

正如您所见，我的导航栏的虚线边框超出了容器。

以下是我的CSS规则。

body{font-size: small; background-image:url(../images/bg.gif);margin:50px 0px; padding:0px;}
#container {width:600px; margin:0px auto;padding:15px; border:1px solid white;background-color:#fff;}
.navbar{width:625px; height:45px;font-size: 13px;height: 22px;font-weight: bold;border: 2px dashed pink;repeat-x;opacity:0.6;}

.button a{float:left;margin-right:50px;color: #000;text-decoration: none;text-align: center;width: 100px;height:25px;background: url(../images/nav.jpg) repeat-x;}

这是我的HTML：

<!DOCTYPE html>
<html>
 <head>
   <title>Avril Lavigne</title>
    <link rel = "stylesheet" type = "text/css" href="style/style.css"/>
 </head>

  <body>
     <div id = "container">

         <div id = "header">
            <img src = "images/header.jpeg">
         </div>

          <div class = "navbar">
            <div class = "button"  > <a href = "#">Home</a></div>
            <div class = "button"  > <a href = "#">Simply Avril</a></div>
            <div class = "button"  > <a href = "#">Images</a></div>
            <div class = "button"  > <a href = "#">Tour Dates</a></div>     
          </div>

           <div id = "Content">
            <p id = "about">
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
                et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
                ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam 
                quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
                qui in ea voluptate velit esse quam nihil molestiae consequatur, 
                vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
            </p>    
           </div>


     </div>
  </body>
</html>

Answer 1

容器为600px，导航栏为625px。您的导航栏比容器大，因此它会突破容器。默认溢出属性设置为可见，这就是您仍然可以看到它的原因。尝试将导航栏的宽度更改为小于容器的内容框。 Here's some information on the box-model

Answer 2

body {
    font-size: small;
    background-image: url(../images/bg.gif);
    margin: 50px 0px;
    padding: 0px;
}

#container {
    width: 600px;
    margin: 0px auto;
    padding: 15px;
    border: 1px solid white;
    background-color: #fff;
}

.navbar {
    width: 625px;
    height: 45px;
    font-size: 13px;
    height: 22px;
    font-weight: bold;
    border: 2px dashed pink;
    repeat-x;opacity:0.6;
}

您的容器是600px，导航栏是625px，您需要将导航栏放在容器内。将导航栏的大小更改为600px。

将导航栏置于容器内

2 个答案: