Question

我的导航栏是1024px并浮动在屏幕中间。我正试图将导航栏的颜色一直带到屏幕的左侧。在导航栏的右侧，我想将5px的橙色一直带到屏幕的右侧。

.orangebar {
    background-color:#f36f21;
    height:5px;
}

我在jsFiddle中创建了这个问题的一个愚蠢版本（用于快速编辑）。 http://jsfiddle.net/CKZhV

努力实现这一目标： enter image description here

问题图片： enter image description here

Answer 1

问题是，菜单溢出<body/>和<html/>。因此，您的.orangebar只使用<body/>的宽度，这是一个窗口宽度。这就是为什么你滚动时看不到其余部分的原因。

你可以给它一个min-width：

.orangebar {
    min-width: 1024px;
}

基本上我不会建议，但是因为你已经有一个固定的菜单宽度，所以没关系。

这是Update to your Fiddle

Answer 2

正在运行的版本： http://jsfiddle.net/CKZhV/3/（请参阅根据您的输入进行更新）

将此重置添加到您的CSS：

* {
    margin: 0;
    padding: 0;
}

现在看到您更新的照片，问题很明显。根据您的新输入编辑了我的答案。

您最好给容器一个最小宽度而不是1024px的固定宽度，并在菜单栏中添加匹配的背景颜色。

然后你可以将它浮动到左边并将它的内容浮动到右边。您不再需要margin:0 auto;。

以下是更新的工作版本： http://jsfiddle.net/CKZhV/10/

Answer 3

我编辑了你的小提琴http://jsfiddle.net/kevinPHPkevin/CKZhV/6/

#navbar {
    width:50%;
    text-align:right;
    float:right;
    background:#14325c;
    color:#fff;
}

修订http://jsfiddle.net/kevinPHPkevin/CKZhV/8/

Answer 4

我不得不使用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>

Answer 5

检查fiddle。我给了.main-nav 50％的宽度和背景颜色。这个小提琴有效，但它不会一直到屏幕，因为父div有margin: 0 auto。

如果您删除保证金，那么您可能会得到所需的解决方案。见fiddle

将CSS导航栏颜色拉伸到屏幕边缘

5 个答案: