將容器中的導航欄居中

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

將容器中的導航欄居中

回答

相關問題