Question

如何让导航栏跨越我的网页？我把它设置为850px。容器div设置为850px。

这是链接和代码： http://matthewtbrown.com/jeffandcricketquilt/index2.html

nav {
width:850px;
}
nav li {
                font-family: 'bitterregular';
                font-size:16px;
            }
    nav ul {
                background: #000; /* Old browsers */
                list-style: none;
                position: relative;
                display: inline-table;
            }
    nav ul:after {
                content: ""; clear: both; display: block;
            }
    nav ul ul {
                display: none;
            }

    nav ul li:hover > ul {
                display: block;
            }
    nav ul li {
                float: left;
                color:#fff;
            }

    nav ul li:hover a {
                color:#FFF;
            }
    nav ul li a {
                display: block;
                padding: 10px 40px;
                color:#FFF;
                text-decoration: none;
            }
    nav ul ul {
                background: #FFF;
                border-radius: 0px; 
                padding: 0;
                position: absolute; 
                top: 100%;
            }
    nav ul ul li {
                float: none; 
                border-top: 1px solid #444;
                border-bottom: 1px solid #444;
                border-color:#FFF;                  
                position: relative;
                background-color:#000;
                font-size:12px;
            }
    nav ul ul li a {
                padding: 8px 40px;
                color:#FFF;             }   
    nav ul ul li a:hover {
                background-color:#000;
                color:#999;
                                }
    nav ul  li a:hover {
                background-color:#000;
                color:#999;
                                }
    nav ul ul ul {
                position: absolute; left: 100%; top:0;
            }

Answer 1

您的nav为850px，但您的黑色背景（ul）却不是。

要解决：改为将黑色背景设置为nav。

Answer 2

如果您想要100％的容器宽度，只需将ul的宽度指定为100%

Answer 3

<ul>不会自动填充850像素容器<div>的宽度。将<ul>宽度设置为100％即可。

ul {
    width: 100%;
}

CSS导航栏没有跨越

3 个答案: