Css 使导航条在容器内居中
我是CSS新手，我们的任务是创建一个简单的网站，我决定创建一个专门为avril lavigne创建的简单网站（请不要评判我）。一切都很顺利，我的容器div始终处于中心位置，我不明白为什么我容器内的导航栏超出了容器的边界线。这是一个截图 正如您所看到的，导航栏的虚线边框超出了容器 这是我的CSS规则Css 使导航条在容器内居中,css,html,web,border,Css,Html,Web,Border,我是CSS新手，我们的任务是创建一个简单的网站，我决定创建一个专门为avril lavigne创建的简单网站（请不要评判我）。一切都很顺利，我的容器div始终处于中心位置，我不明白为什么我容器内的导航栏超出了容器的边界线。这是一个截图 正如您所看到的，导航栏的虚线边框超出了容器 这是我的CSS规则 body{font size:small；背景图像：url（../images/bg.gif）；边距：50px 0px；填充：0px；} #容器{宽度：600px；边距：0px自动；填充：15px；
body{font size:small；背景图像：url（../images/bg.gif）；边距：50px 0px；填充：0px；}
#容器{宽度：600px；边距：0px自动；填充：15px；边框：1px纯白；背景色：#fff；}
.navbar{宽度：625px；高度：45px；字体大小：13px；高度：22px；字体重量：粗体；边框：2px粉红色虚线；重复-x；不透明度：0.6；}
.button a{float:left；margin-right:50px；颜色：#000；文本装饰：无；文本对齐：居中；宽度：100px；高度：25px；背景：url（../images/nav.jpg）repeat-x；}
<!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>
艾薇儿·拉维尼
“所有人都有一个明确的认识，这是一个错误
劳丹蒂姆（doloremque laudantium）、普雷姆（totam rem aperiam）、伊普萨（eaque ipsa）是一位真正的发明家
因此，准建筑设计师必须对生活进行解释
这是一个非常好的例子，因为它是一个非常好的例子
在这一点上，合理的解释是：一个人的权利，一个人的权利，一个人的权利，一个人的权利，
这是一个由劳工和财阀组成的临时组织
在最低限度的工作中，我们需要在实验室里进行身体锻炼，
非流动性消费品？其所有权和所有权
在你的思想中，你是一个自由的人，
“你的生活是怎样的？”
您的容器为600px，导航栏为625px。您需要将导航栏保持在容器内。将导航条的大小更改为600px。我明白了，但我如何将导航条粘贴到容器上？我希望导航栏从容器的最左边开始，然后一直到容器的最右边？块级元素将自动占据其容器的整个宽度：您不需要设置宽度（625px）。容器的高度应基于您的内容。由于您的内容是浮动的，我会添加
overflow:auto，这可以防止容器折叠。现在，您的宽度和高度应该基于以下内容：您的链接。此外，您的导航栏根据其容器占据了整个宽度。如果这没有意义，请用CSS发布你的HTML，我会为你创建一个JSFIDLE。我已经用类似的设置创建了一个JSFIDLE。我选择不使用你的HTML，因为我觉得它不必要的混乱。这会将您推向正确的方向：。
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;
}