我的導航欄是1024px並浮在屏幕中間。我試圖將導航欄的顏色一直帶到屏幕的左側。在導航欄的右側，我想將5px的橙色一直帶到屏幕的右側。拉伸CSS導航欄顏色到屏幕邊緣
.orangebar {
background-color:#f36f21;
height:5px;
}
我在jsFiddle（快速編輯）中創建了這個問題的簡化版本。 http://jsfiddle.net/CKZhV
努力實現這一點：問題 
圖片： 
的問題是，菜單溢出<body/>和<html/>。因此，您的.orangebar只使用寬度<body/>，這是一個窗口寬度。這就是爲什麼如果你滾動，你不會看到其餘的。
你可以給它一個min-width：
.orangebar {
min-width: 1024px;
}
基本上，我不會建議，但因爲你已經爲你的菜單中選擇一個固定的寬度，也沒關係。
工作版本：http://jsfiddle.net/CKZhV/3/（參見根據您的輸入更新）
添加此重置您的CSS：
* {
margin: 0;
padding: 0;
}
現在看到你更新後的照片你的問題很清楚。根據您的新輸入編輯我的答案。
你最好給容器一個最小寬度而不是固定寬度1024px，並用菜單欄添加一個匹配的背景顏色。
然後，您可以將它浮動到左邊並將其內容向右浮動。您將不再需要margin:0 auto;。
這裏有一個更新的工作版本：http://jsfiddle.net/CKZhV/10/
我編輯你的小提琴http://jsfiddle.net/kevinPHPkevin/CKZhV/6/
#navbar {
width:50%;
text-align:right;
float:right;
background:#14325c;
color:#fff;
}
我不得不使用jQuery，使其工作。
總結：我不是用margin來居中菜單，而是調整了padding-left，這樣它就會攜帶background-color。我也改變了一些CSS，但這不是那麼重要的JS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin:0;
padding:0;
}
.orangebar {
border-top:#f36f21 solid 5px;
width:100%;
}
#navbar {
width:20%;
background:#14325c;
height:39px;
margin:-5px 0 0 0;
}
.main-nav {
width:100%;
position:realtive;
background:#14325c;
}
.main-nav ul {
text-align:left;
display:block;
margin:0 auto;
padding:0;
list-style:none;
width:1024px;
}
.main-nav ul li {
display:inline-block;
margin:0;
position:relative;
padding:10px 20px 10px 20px;
background:#14325c;
color:#fff;
cursor:pointer;
float:left;
}
.main-nav ul li:hover {
text-decoration:none;
background:#afb1b4;
color:#fff;
}
.main-nav ul li ul {
padding:0;
position:absolute;
top:34px;
left:0;
width:233px;
margin:0;
display:none;
}
.main-nav ul li:hover ul {
display:block;
}
.main-nav ul li ul li {
background:#afb1b4;
display:block;
color:#fff;
}
.main-nav ul li ul li:hover {
background:#d5d6d8;
color:#F36F21;
-moz-box-shadow:0px 2px 5px 2px rgba(119, 119, 119, 0.5);
-webkit-box-shadow:0px 2px 5px 2px rgba(119, 119, 119, 0.5);
box-shadow:0px 2px 5px 2px rgba(119, 119, 119, 0.5);
}
</style>
</head>
<body>
<div class="orangebar">
<div id="navbar">
<!-- Navbar -->
<nav class="main-nav">
<ul>
<li>BOARD OF TRUSTEES
<ul>
<li>Board Policy Manual</li>
<li>Monitoring Reports</li>
<li>Monthly Board Packets</li>
</ul>
</li>
<li>RESOURCES
<ul>
<li>Academics</li>
<li>Student Services</li>
<li>Human Resources</li>
<li>Business Office</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
</div>
<!-- End Orangebar -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
setLayout();
$(window).resize(setLayout);
});
var setLayout = function(){
$('#navbar').css({"padding-left": ($(window).width() - 1024)/2 + 'px'});
}
</script>
</body>
</html>
我仍然需要在酒吧左側顯示藍色。但這是朝着正確方向邁出的一步！ – Chaddly
我更新了我的jsFiddle與您的修訂版 – Chaddly
@Chaddly，對不起，我不明白你的意思與「我仍然需要在酒吧的左側藍色」。你能否詳細解釋一下？ –