我的导航栏是 1024px 并且浮动在屏幕中间。我试图将导航栏的颜色一直带到屏幕的左侧。在导航栏的右侧，我想将 5px 的橙色一直带到屏幕的右侧。
.orangebar {
background-color:#f36f21;
height:5px;
}
我在 jsFiddle 中创建了这个问题的简化版本（用于快速编辑）。 http://jsfiddle.net/CKZhV
试图实现这一目标：
问题图片：
问问题
3418 次
5 回答
1
问题是，菜单溢出<body/>并且<html/>. 结果，您.orangebar只使用宽度为<body/>窗口宽度的宽度。这就是为什么滚动时看不到其余部分的原因。
你可以给它一个min-width：
.orangebar {
min-width: 1024px;
}
基本上我不建议这样做，但是由于您的菜单已经有了固定的宽度，所以没关系。
这是您的小提琴的更新
于 2013-04-03T17:57:22.377 回答
1
工作版本： http: //jsfiddle.net/CKZhV/3/（根据您的输入查看更新）
将此重置添加到您的 CSS：
* {
margin: 0;
padding: 0;
}
看到你更新的照片现在你的问题很清楚了。根据您的新输入编辑我的答案。
你最好给容器一个最小宽度而不是一个固定的 1024px 宽度，并添加一个与菜单栏匹配的背景颜色。
然后您可以将其浮动到左侧并将其内容浮动到右侧。你不再需要margin:0 auto;了。
这是一个更新的工作版本：http: //jsfiddle.net/CKZhV/10/
于 2013-04-03T17:59:52.387 回答
1
我编辑了你的小提琴http://jsfiddle.net/kevinPHPkevin/CKZhV/6/
#navbar {
width:50%;
text-align:right;
float:right;
background:#14325c;
color:#fff;
}
于 2013-04-03T18:22:37.677 回答
0
我不得不使用 jQuery 来使它工作。
总结：我没有使用margin使菜单居中，而是调整了 ，padding-left以便它可以携带background-color. 我还更改了一些 css，但与 js.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>
于 2013-04-03T18:24:57.030 回答