1

这是我网站的链接。当您具有宽分辨率时，显示没有问题，但是如果使用浏览器我尝试模拟一点分辨率，我会遇到一个问题：导航栏不会填满整个页面，而只会填满浏览器的宽度, 即使我使用了 width : 100%;

这里是 CSS 中的代码

header {
width: 100%;
/*min-width: 1000px;*/
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */
background: url('../img/binding_dark.png');
}

nav {
margin-bottom: 30px;
width: 100%;

background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #353535 0%,#222222 100%);
background: -o-linear-gradient(top, #353535 0%,#222222 100%);
background: -ms-linear-gradient(top, #353535 0%,#222222 100%);
background: linear-gradient(top, #353535 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 );
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #000;
}

标题是宽的黑色块，导航在里面。

这是该问题的一个示例：

在此处输入图像描述

标题不会填满整个页面（水平），li 元素会溢出，渐变背景会分裂。

请问这个有解决办法吗？

4

3 回答 3

1

这是您更正的 CSS 和小提琴链接

header {
    width: 100%;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
    -moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
    box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
    padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */
    background: url('../img/binding_dark.png');
}

hgroup,
main,
nav {
    margin-bottom: 30px;
    width: 100%;
    background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222));
    background: -webkit-linear-gradient(top, #353535 0%,#222222 100%);
    background: -o-linear-gradient(top, #353535 0%,#222222 100%);
    background: -ms-linear-gradient(top, #353535 0%,#222222 100%);
    background: linear-gradient(top, #353535 0%,#222222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 );

    border-top:1px solid #000;
    border-bottom:1px solid #000;
}

   /* nav:before {
        border-top: 1px solid #444;
    }

    nav:after {
        border-top: 1px solid #333;
    }*/

    nav ul {
        /*width: 808px;*/
        height: 45px;
        margin: 0 auto;
        /*border-left: 1px solid #111;
        border-right: 1px solid #444;*/
    }

    nav li {
        float: left;
        list-style-type:none;
    }
        nav li a {
            display: inline-block;
            /*width: 200px;*/
            width:auto;
            padding:0 50px;
            height: 45px;
            font: bold 15px 'Arial', sans-serif;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 48px;
            text-shadow: 1px 1px 0px #111;
            filter: dropshadow(color=#111, offx=1, offy=1);
            border-left: 1px solid #444;
            border-right: 1px solid #111;

            background-color:#2B2B2B;
        }


            nav li a:hover {
                background: -moz-linear-gradient(top, #444 0%, #222 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
                background: -webkit-linear-gradient(top, #444 0%,#222 100%);
                background: -o-linear-gradient(top, #444 0%,#222 100%);
                background: -ms-linear-gradient(top, #444 0%,#222 100%);
                background: linear-gradient(top, #444 0%,#222 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#222',GradientType=0 );
                /*background-color:#2F2F2F;*/
            }

            nav li a:active {
                background: #222;
                -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
                -moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
                box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
            }

                nav li a:active:after {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 4px;
                    position: relative;
                    bottom: 6px;
                    background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5e1f), color-stop(100%,#ff3410));
                    background: -webkit-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
                    background: -o-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
                    background: -ms-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
                    background: linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e1f', endColorstr='#ff3410',GradientType=0 );
                }
于 2013-07-05T04:43:50.047 回答
0

布局还有其他问题，但对于眼前的问题，您可以尝试

#page-wrap header {min-width: 1400px;}
于 2013-07-05T04:25:54.947 回答
0

尝试增加nav ul. 

nav ul {
width: 809px;
height: 45px;
margin: 0 auto;
border-left: 1px solid #111;
border-right: 1px solid #444;
}

您可以使用开发人员工具（F12）来检查元素。

检查这个截屏。

于 2013-07-05T04:29:26.667 回答