将容器中的导航栏居中

我是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>

来源

2012-02-15 user962206

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

来源

2012-02-15 04:53:15 Akaishen

我明白了，但是如何将导航栏粘贴到容器？我希望我的导航栏从我的容器的最左侧开始，然后到达容器的最右侧部分？ – user962206 2012-02-15 05:00:02

块级元素将自动占据其容器的整个宽度：不需要设置宽度（625px）。您的容器的高度应该基于您的内容。当你的内容被浮动时，我会添加'overflow：auto;'并移除'height：45px;'，这样可以防止容器崩溃。现在您的宽度和高度应该基于以下内容：您的链接。此外，您的导航栏正在占用基于其容器的全宽。如果这没有意义，请将您的HTML与CSS一起发布，我将为您创建一个JSFiddle。 – Akaishen 2012-02-15 05:30:15

我已经添加了它。请重新检查我的问题 – user962206 2012-02-15 05:37:54

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。

来源

2012-05-27 21:18:57 Jess

将容器中的导航栏居中

回答

相关问题