1
私はCSSを初めて使用しており、シンプルなウェブサイトを作成するように指示されています。私はavril lavigne専用の簡単なウェブサイトを作成することに決めました（私を判断しないでください）私のコンテナdivは常に中央にありますが、私のコンテナ内のナビゲーションバーが私のコンテナの境界線を超えているのはなぜですか。あなたは私のナビゲーションバーの点線の境界がコンテナを超えて起こっている見ることができるようにここでコンテナ内にnavbarを配置する
のスクリーンショットです。
ここに私の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>
私は参照してください、しかし、どのように私はコンテナにナビバーの棒を置くでしょうか？私は私のnavbarをコンテナの一番左の部分から始まり、次にコンテナの一番右の部分から始めたいと思っていますか？ – user962206
ブロックレベル要素は自動的にコンテナの全幅を占有します。幅（625ピクセル）を設定する必要はありません。コンテナの高さはあなたのコンテンツに基づいていなければなりません。あなたのコンテンツがフローティングされているので、 'overflow：auto;'を追加して 'height：45px;'を削除すると、コンテナが折り畳まれなくなります。あなたの幅と高さはあなたのリンク内の内容に基づいています。さらに、ナビゲーションバーはそのコンテナに基づいて全幅を占めています。これが意味をなさない場合は、CSSでHTMLを投稿してください。JSFiddleを作成します。 – Akaishen
私は既にそれを追加しました。 – user962206